In this tutorial, you will learn how to remove the extra div tags that get rendered by Episerver content areas. In Episerver 7 onwards, you may notice that the CMS injects two tags above and below all content areas. This extra tag can cause CSS issues. If the frontenders are using a static website to create the HTML and CSS before integrating it into the Episerver site, these extra divs can cause unexpected styling issues, wasting time.
The extra div tags are required by Episerver in order for the on-page editing (OPE) to work. These extra div tags are only needed in edit mode and you can safely remove them from production mode, e.g. normal rendering. It is possible to modify the HTML the content area renders. Take this example:
This option gives you some level of flexibility, however, if you work with a frontender who has very strict opinions on what the pages final mark-up should look like, you might want to come up with a solution to completely remove the divs being rendered in live mode. The code below does this:
There are a few things to note about the code above. First, it uses the ServiceConfiguration attribute. This attribute will register the class so you can use ServiceLocator.Current.GetInstance(); to instantiate it. If the page is in edit mode, the code will render a div. If the page is in normal view mode the tags are not rendered. To trigger this class you will need to override the default content area HTML view.
To do that override the files found in:
View ➡ Shared
Create a folder called DisplayTemplates, then create a file called ContentArea.cshtml. This will override the default view. If you want to, you can also override other default views like, Paragraph.cshtml, H2.cshtml, Image.cshtml, etc... Next, create an HTML helper that will call the custom content area code:
The extension method will then look like this:
That's it! You now have a way to get rid of those pesky div tags. A working example of this code can be downloaded here. Happy Coding 🤘
