Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

How to remove extra divs around blocks in version 12


In the parent block I have this in the view file.

 @Html.PropertyFor(m => m.MainContentArea, new { HasContainer = false, HasItemContainer = false })

But there is still an extra div around my child block.   How can I remove that?

Feb 16, 2023 19:58

HasItemContainer was a specific property used on the EpiBootstrap plug-in created by Valdis, this plug-in is not compatible with CMS12 you will need to replace it with the one below. (Assuming you have not created your own ContentAreaRenderer)

Full Post : 

Feb 17, 2023 4:30
valdis - Feb 27, 2023 9:20
beware that Advanced Content Area plugin will automatically override your content area renderer under the hood. if you have your own custom renderer - one of them will take a lead.
to understand who is the winner - you can check the dependency container and look for IContentAreaRenderer interface implementing type. dependency container viewer is available also via "Episerver.DeveloperTools".

You may want to keep a wrapping container for the block, but you can change it to be something semantic instead of a div element. 

For the latest build I'm working on we are replacing the wrapping <div> with <section> and remove the outer container using this HtmlHelper extension method:

    /// <summary>
    /// Used for standard rendering of a <see cref="ContentArea"/>.
    /// This will remove the outer container and change the wrapping element for blocks to use a section tag.
    /// </summary>
    /// <typeparam name="T">The Model for the page</typeparam>
    /// <param name="htmlHelper">The generic html helper</param>
    /// <param name="contentAreaFunction">A function expression to target the <see cref="ContentArea"/> on the Model</param>
    /// <returns></returns>
    public static IHtmlContent RenderContentArea<T>(this IHtmlHelper<T> htmlHelper, Expression<Func<T, ContentArea?>> contentAreaFunction)
        return htmlHelper.PropertyFor(contentAreaFunction, new
            HasContainer = false,
            ChildrenCustomTagName = "section"
Edited, Feb 17, 2023 10:51

You can use below to remove extra div and need to inherit with ContentAreaRenderer

 protected override void RenderContentAreaItem(IHtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
            if (base.IsInEditMode() || base.ShouldRenderWrappingElement(htmlHelper))
                base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
                htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
Feb 21, 2023 7:43
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.