Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.

 

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.