London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

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.