Customise the Outer div of Episerver Blocks

Vote:
 

Hi,

Is it possible to customise the outer div that is created by Episerver Blocks. I can see that it is possible to override the GetContentAreaItemCssClass method but is there a way that you can add other attributes to the div?

Can you override other methods?

Thanks

#144209
Feb 09, 2016 10:01
Vote:
 

You can override BeforeRenderContentAreaItemStartTag.

protected override void BeforeRenderContentAreaItemStartTag(TagBuilder tagBuilder,
            ContentAreaItem contentAreaItem)
        {
            tagBuilder.Attributes.Add("id", id);
            base.BeforeRenderContentAreaItemStartTag(tagBuilder, contentAreaItem);
        }
#144217
Feb 09, 2016 11:19
Vote:
 

Hi,

Great - is there anyway that I can prevent this outer div from being created?

Jon

#144275
Feb 10, 2016 10:28
Vote:
 

The DIVs are required for the CMS experience and so are rendered in to the CMS editor to be consistent. As a note when using @Html.PropertyFor you can passing an object which dictates what the surrounding element and css classes should be e.g.

 @Html.PropertyFor(model => model.CurrentBlock.ClientLogos, new
{
    CustomTag = "ul",
    CssClass = "list",
    ChildrenCustomTagName = "li",
    ChildrenCssClass = "list_item"
})
CustomTag = The outer wrapper for the ContentArea
CssClass = Is the class on that outer wrapper
ChildrenCustomTagName = The tag for each block that's rendered out in the ContentArea
ChildrenCssClass = The css class for each block that's rendered out in the ContentArea



#144298
Edited, Feb 10, 2016 16:48
Vote:
 

In your PropertyFor you could also add "hascontainer = false", this will remove the container div that wraps the content area.

#144336
Edited, Feb 11, 2016 7:10
Vote:
 

Yes it is possible to remove it but personally we prefer not to. The DOM structure that is rendered out should be consistent against the front end and the back end preview IMO and though it's unlikely removal of a wrapper element would make the differerce keeping things consistent helps to mitigate issues

#144347
Feb 11, 2016 10:08
Vote:
 

Hi,

I understand your concerns but this is for a Block inside a block and the extra divs mess up the designers markup.

#144403
Feb 12, 2016 10:48
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.