Jon Sexton
Jun 3, 2021
  1306
(5 votes)

How to easily remove the extra DIV tags for Content Areas

Extra DIV tags around Content Areas

From time to time we've all had issues with the extra DIV tags EPiServer generates around Content Area items, namely blocks.  Depending upon the required output this 'feature' (that is actually there for on-page editing in the CMS) may cause some extra padding around the output of the blocks in the Content Area, meaning that the output does not match the UX design.

For example:

@Html.PropertyFor(x => x.SomeContentArea)

Which results in:

<div>          <!-- Contant Area wrapper -->
    <div...>    <!-- Block element -->
        <... />  <!-- Content of block -->
    </div>
</div>

Without writing specific renderers for our Content Areas we ask, 'is there a way we can easily disable these extra DIV tags?'.

Well, EPiServer does provide us with an 'additionalViewData' attribute called, 'HasContainer', which can be used, hence:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false } )

Will result in:

<div...>    <!-- Block element -->
    <... />  <!-- Content of block -->
</div>

Great but there's still a wrapper around the content of the block, how do we get rid of that?

Well, there's a NuGet package that we can add into our solution, 'EPiBootstrapArea', written by Valdis Iljuconoks.  From version 3.3.4 onwards we can add:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false, HasItemContainer = false } )

Which gives us:

<... />  <!-- Content of block -->

Perfect!  Everything renders correctly now, AND we still have an on-page editing experience in the CMS.

A word of warninng though; if we're going to render our blocks in our Content Area in the <HEAD> section of our page then we may run into trouble with invalid markup when viewing in on-page editing mode in the CMS.  We can get around this by adding another attribute, hence:

@Html.PropertyFor(x => x.SomeContentArea, new { HasContainer = false, HasItemContainer = false, HasEditContainer = false } )

This will get us out of trouble but, although the blocks in the Content Area are rendered, we cannot edit it in on-page editing and we'll have to switch to the properties view.  No big deal in my opinion.

A huge thanks to Valdis Iljuconoks, their solution worked a treat for the bug I was working on and I added it here in the hope that other people find it as useful as I did.

Jun 03, 2021

Comments

Giuliano Dore
Giuliano Dore Jun 3, 2021 11:18 AM

Really useful !

Sam Brooks
Sam Brooks Jun 3, 2021 11:21 AM

this is useful and very consice, thanks Jon. I haven't used that nuget package before but i wish i knew about it in the past, i've had to try to find a hack to remove the divs that get outpt around a block and it didn't look anywhere near as neat as this. awesome!

valdis
valdis Jun 8, 2021 05:35 AM

(bow-down)

Please login to comment.
Latest blogs
Plug-in manager is back in CMS 12

Plug-in manager is back in the UI, what is it and how can i use it?

Luc Gosso (MVP) | Oct 6, 2022 | Syndicated blog

Display Child Pages in Content Delivery API Response

The below example will implement an instance of IContentConverterProvider to customise the serialisation of PageData and output child pages in the...

Minesh Shah (Netcel) | Oct 4, 2022

Bring the Report Center back in Optimizely CMS 12

The Report Center has been a part of Optimizely CMS since its first debut in version 5R2 in 2008, but in CMS 12, it's removed! Don't despair! Make...

Tomas Hensrud Gulla | Oct 4, 2022 | Syndicated blog

Customizing Property Lists in Optimizely CMS

Generic property lists is a cool editorial feature that has gained a lot of popularity - in spite of still being unsupported (officially). But if y...

Allan Thraen | Oct 2, 2022 | Syndicated blog

Optimizely names Luminary Senior Developer, Ynze Nunnink, OMVP

Luminary Senior Developer and Optimizely Lead, Ynze Nunnink has secured the coveted position of Optimizely MVP. Earning a Platinum badge for his...

Ynze | Oct 2, 2022 | Syndicated blog

Content Delivery API – The Case of the Duplicate API Refresh Token

Creating a custom refresh provider to resolve the issues with duplicate tokens in the DXC The post Content Delivery API – The Case of the Duplicate...

David Lewis | Sep 29, 2022 | Syndicated blog