Try our conversational search powered by Generative AI!

Design of ContentArea breaks in edit mode because of two extra div-s


Design breaks in edit mode, because @Html.EditAttributes renders extra two divs, so the divs are not floated.

See image:

(The width of a surrounding div is 100%, so the edit box spans over it and it should only surround the red div. Hence divs look like they are one bellow another)

I would know how to fix this, if I was rendering the ContentArea on the page.

<div @Html.EditAttributes("FooterContactBlocks")>
    @Html.PropertyFor(m => m.FooterContactBlocks, new { ChildrenCssClass = "footer-box span2" })


However, I am rendering it in Footer (a part of _Layout), so I can't use Html.PropertyFor and I am using:

            <div class="row-fluid" @Html.EditAttributes("FooterContactBlocks")>
                @{ Html.RenderContentArea(@Model.FooterContactBlocks); }

How can I use RenderContentArea and specify children's CSS class?

Dec 27, 2012 17:26

You can try to set following view data parameters before rendering content area with Html.RenderContentArea extension method; these values are used for custom tag, css class, children custom tag and children css class:

ViewData[EPiServer.Web.WebControls.RenderSettings.CustomTag] = "div";
ViewData[EPiServer.Web.WebControls.RenderSettings.CssClass] = "areaStyle"
ViewData[EPiServer.Web.WebControls.RenderSettings.ChildrenCustomTag] = "span";
ViewData[EPiServer.Web.WebControls.RenderSettings.ChildrenCssClass] = "blockStyle";


Dec 28, 2012 9:55

Hi, Dmytro,

Nice news for me to get the day going, it works :)))

I have added this to the controller.

        public ActionResult Footer()
            if (StartPage != null)
                var viewModel = new FooterViewModel
                    FooterContactBlocks = StartPage.FooterContactBlocks

                ViewData[RenderSettings.ChildrenCustomTag] = "div";
                ViewData[RenderSettings.ChildrenCssClass] = "footer-box span2";

                return PartialView("Footer", viewModel);

            return null;

I am not sure what I would do if I had two ContentArea with different rendering settings, probably I would need to create two views and controllers, but I guess that's fine.

Thank you very much!

Dec 28, 2012 10:17
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* 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.