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

Member since: 2010

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

See image: 

http://img543.imageshack.us/img543/440/editmodebreaks.jpg

(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" })
</div>

    

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); }
            </div>

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

#64529 Dec 27, 2012 17:26
  • Member since: 2008

    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";

        

    #64531 Dec 28, 2012 9:55
  • Member since: 2010

    Hi, Dmytro,

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

    I have added this to the controller.

    [HttpGet]
            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!

    #64532 Dec 28, 2012 10:17