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

Vote:
 

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?

#296638
Feb 16, 2023 19:58
Vote:
 

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)

https://github.com/valdisiljuconoks/optimizely-advanced-contentarea

Full Post : https://blog.tech-fellow.net/2023/01/23/optimizely-advanced-contentarea-render-is-back/amp/ 

#296674
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".
Vote:
 

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"
        });
    }
#296685
Edited, Feb 17, 2023 10:51
Vote:
 

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);
            }
            else
            {
                htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
            }
        }
#296939
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.