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 Jun 3, 2021 11:18 AM

Really useful !

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 Jun 8, 2021 05:35 AM

(bow-down)

Please login to comment.