Html.PropertyFor ContentArea is adding 2 empty divs

Ken Palmer

Vote:

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.



    
        @Html.PropertyFor(x => x.contentArea)

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.

#114009

Dec 02, 2014 17:50

henriknystrom

Vote:

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.

#114020

Edited, Dec 03, 2014 0:20

Marcin Wrzyciel

Vote:

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/

#114050

Edited, Dec 03, 2014 13:20

Andreas Fredriksson

Vote:

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

#114055

Dec 03, 2014 14:18

Ken Palmer

Vote:

Thank you all for your help. I ran with the solution @henriknystrom suggested, and that addressed my problem.

#114066

Dec 03, 2014 16:00