Design of ContentArea breaks in edit mode because of two extra di

November Happy Hour will be moved to Thursday December 5th.

AI OnAI Off

Home / Forums / Legacy forums / Episerver 7 CMS /

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

Marija Jemuovic

Vote:

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

Dmytro Duk

Vote:

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

Marija Jemuovic

Vote:

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

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.