November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
Html.PropertyFor ContentArea is adding 2 empty divs
Hi Ken,
As you say, a ContentArea property will be rendered with one div around the whole area and one for each item in the area. These are needed for the EPiServer UI to work properly and even though it could be possible to only add them when editing content, this might cause disruption to the rendering presented for the editors.
Luckily it is very easy to modify these elements, in your case by adding custom classes to them by passing in some rendersettings to the PropertyFor method such as:
<div class="psSlideDeck iosslider">
@Html.PropertyFor(m => m.contentArea, new { cssclass = "slider", childrencssclass = "psSlide slide" })
</div>
It is also possible to change the element types from div by passing in customtag and/or childrencustomtagname, but this doesn't seem like it's needed in your case.
Edited,
Dec 03, 2014 0:20
Hi Ken
If you got lot of places when you need to fix it it might be worth to change rendering for content areas.
A long time ago I already blogged about this: http://wrzyciel.pl/force-episerver7-to-not-add-empty-divs-for-contentareas/
Edited,
Dec 03, 2014 13:20
If you need help for styling, you can give the div:s class names in the Index action in the page controller.
Like this,
ViewData[RenderSettings.CustomTag] = "div";
ViewData[RenderSettings.CssClass] = "block_container";
ViewData[RenderSettings.ChildrenCustomTag] = "div";
ViewData[RenderSettings.ChildrenCssClass] = "block_wrapper";
Dec 03, 2014 14:18
Thank you all for your help. I ran with the solution @henriknystrom suggested, and that addressed my problem.
Dec 03, 2014 16:00
I am displaying a ContentArea on a page, and when it gets rendered 2 extra levels of unneeded divs are being added. This is from my view.
This is what gets rendered in the browser on the published page.
Where the comments above appear for the unnecessary divs, I would like those removed.
I'm trying to use the iosSlider library (https://iosscripts.com/iosslider/), which expects this nesting structure:
I suspect the extra divs that are being added to my markup are interfering with my implementation. Is there some additional setting that I need to apply in EPiServer, or some overload that I need to apply to @Html.PropertyFor(x => x.contentArea) that will suppress the extra divs that are being added? Thanks for your help.