Content area rendering - How to remove child container?

Vote:
 

Hi  all, 

I am working with episerver 11 and following existing design from front-end dev. When I add block to content area, epi auto generate 2 div levels that break UI layout. I alreay know how to remove parent container when rending by using HasContainer property in view data but I still stuck for child containers. Is there anyway to remove them as well? 

Any help would be appreciated.

Thank you

#199125
Nov 16, 2018 5:18
Vote:
 

One way would be to create a display template to render the content area.

  1. Create a new .cshtml template in the folder: Views > Shared > DisplayTemplates
  2. Call to the new template when rendering the page. e.g. @Html.PropertyFor(f => f.CurrentPage.MainContentArea, "MyAreaDisplayName")

"MyAreaDisplayName" relates to the name of the .cshtml file created.

#199129
Nov 16, 2018 10:10
Vote:
 

If you need to do this I would suggest creating your own ContentAreaRenderer (if you haven't already) and overriding RenderContentAreaItem like this:

public class MyContentAreaRenderer : ContentAreaRenderer
{
    protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
    {
        htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
    }
}

As a word of warning though - without the wrapping element, the editing UI isn't great (you can't drag blocks around, choose display options, etc.). The better option is to accept that there will be a wrapping element and add the appropriate classes to make it work with your front end.

#199133
Edited, Nov 16, 2018 10:30
Vote:
 

As an alternative which keeps the edit functionality you might want to render the wrappers when in edit mode and remove them when the rest of the time like this:

protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
{
    if (PageEditing.PageIsInEditMode)
    {
        base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
    }
    else
    {
        htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
    }
}

You'll still have issues though in that the rendering will be inconsistent between views so I'd still recommend trying to work with the wrapping elements if at all possible.

#199134
Nov 16, 2018 10:46
Vote:
 

you can take a look at this package (it actually has almost nothing in common with Bootstrap anymore :) https://github.com/valdisiljuconoks/EPiBootstrapArea

#199149
Nov 16, 2018 14:35
Vote:
 

Thanks Paul!

I rather like the opt in version Episerver already has implemented with HasContainer, so I made some changes.

    public class CustomContentAreaRenderer : ContentAreaRenderer
    {
        protected override void RenderContentAreaItem(HtmlHelper htmlHelper, ContentAreaItem contentAreaItem, string templateTag, string htmlTag, string cssClass)
        {
            if (IsInEditMode(htmlHelper) || ShouldRenderChildrenWrappingElement(htmlHelper))
            {
                base.RenderContentAreaItem(htmlHelper, contentAreaItem, templateTag, htmlTag, cssClass);
            }
            else
            {
                htmlHelper.RenderContentData(contentAreaItem.GetContent(), true, templateTag);
            }
        }

        protected virtual bool ShouldRenderChildrenWrappingElement(HtmlHelper htmlHelper)
        {
            bool? flag = (bool?)htmlHelper.ViewContext.ViewData["haschildrencontainer"];
            return flag ?? true;
        }
    }

Usage:

@Html.PropertyFor(x => x.CurrentPage.ContentArea, new { HasContainer = false, HasChildrenContainer = false })
#227740
Edited, Sep 11, 2020 8:12
Vote:
 

You can try this way:

1. Install package

PM > Install-Package EPiBootstrapArea

2. OR Render content area property like below:

@Html.PropertyFor(m => m.MyCOntentArea,
new
{
   HasContainer = false,
   HasItemContainer = false,
   HasEditContainer = false
})
#227805
Sep 13, 2020 2:32
valdis - Sep 13, 2020 6:33
Be aware that HasEditContainer property has consequences in edit mode..
* 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.