Jon Sexton
Jun 3, 2021
  4580
(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
World on Opti ID

We're excited to announce that world.optimizely.com is now integrated with Opti ID! What does this mean for you? New Users:  You can now log in wit...

Patrick Lam | Jun 22, 2025

Avoid Scandinavian Letters in File Names in Optimizely CMS

Discover how Scandinavian letters in file names can break media in Optimizely CMS—and learn a simple code fix to automatically sanitize uploads for...

Henning Sjørbotten | Jun 19, 2025 |

Exporting Optimizely databases causing errors

Solutions to a couple of recurring issues when migrating databases to the cloud.

Tomas Hensrud Gulla | Jun 18, 2025 |

Common Pitfalls with Search in Optimizely Graph - and How to Avoid Them

Optimizely Graph offers powerful, flexible search capabilities out of the box, making it a popular choice for headless implementations. However, li...

Michał Mitas | Jun 18, 2025