Try our conversational search powered by Generative AI!

Jon Sexton
Jun 3, 2021
(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 -->

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 -->

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


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


Please login to comment.
Latest blogs
Headless forms reloaded (beta)

Forms is used on the vast majority of CMS installations. But using Forms in a headless setup is a bit of pain since the rendering pipeline is based...

MartinOttosen | Mar 1, 2024

Uploading blobs to Optimizely DXP via PowerShell

We had a client moving from an On-Prem v11 Optimizely instance to DXP v12 and we had a lot of blobs (over 40 GB) needing uploading to DXP as a part...

Nick Hamlin | Mar 1, 2024 | Syndicated blog

DbLocalizationProvider v8.0 Released

I’m pleased to announce that Localization Provider v8.0 is finally out.

valdis | Feb 28, 2024 | Syndicated blog

Epinova DXP deployment extension – With Octopus deploy

Example how you can use Epinova DXP deployment extension in Octopus deployment.

Ove Lartelius | Feb 28, 2024 | Syndicated blog