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!
AI OnAI Off
Design of ContentArea breaks in edit mode because of two extra div-s
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.
[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!
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.
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?