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
* 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.