CODEWITHSUNDEEP
blockepiserverepiserver-7
Krzysztof Morcinek
Krzysztof Morcinek

Reputation: 1021

Remove <div> generated around Shared Block in EPiServer 7

Episerver always wrap shared block in a tag. I would like to get rid of this. So if in my LinkBlock has a Template with only
<a href="#">link</a>
I would not get a
<div><a href="#">link</a></div>
in the view for a user.

If this is not possible how can I change <div> to any other tag, or put a CssClass on it. Like it is possible in not shared blocks:
<EPiServer:Property runat="server" PropertyName="RightContentArea" CustomTagName="aside" CssClass="column-2 sidebar"></EPiServer:Property>

Upvotes: 3

Views: 5241

Answers (6)

Stureman
Stureman

Reputation: 1

Since i wasn't able to remove the <div>'s i didn't want, i put my own CSS class on them. This did the trick for me in Webforms. (If anyone still uses it)

Use <RenderSettings ChildrenCssClass="yourCssClass" />

<EPiServer:Property runat="server" PropertyName="RightContentArea"CustomTagName="aside" CssClass="column-2 sidebar"><RenderSettings ChildrenCssClass="yourCssClass"></RenderSettings></EPiServer:Property>

Upvotes: 0

Jon Jones
Jon Jones

Reputation: 1084

You can also create a custom content area that doesn't render the divs when edited in live mode and only renders them in edit mode.

If you only need to do this once or twice I would still recommend going with the ChildrenCustomTagName route as it's a bit mroe flexible. If you need to do this a lot and you can't change your CSS easily then I would go custom content area. If you are interested in how to remove the div's I wrote a blog post and a sample site on github here Extra divs in content area how to remove them ?

Upvotes: 0

Oleksandr Kucherenko
Oleksandr Kucherenko

Reputation: 2039

I use this trick in cshtml:

@RenderBlocks(Model.CurrentPage.Content1)


@* ---------------------------------------------------------------------------------- *@
@* Render ContentArea without addition DIVs that EpiServer embed. That breaks layout a lot. *@
@helper RenderBlocks(EPiServer.Core.ContentArea content) { 
  if(null != content){
    var blocks = content.FilteredContents.ToArray();
    foreach(var block in blocks){
      @Html.PropertyFor(x => block)
    }
  }
}

Upvotes: 2

tentonipete
tentonipete

Reputation: 5080

I believe it is the rendering of the ContentArea property which adds the div tags around the blocks it contains.

EPiServer suggests that in order to preserve the editing functionality of the block elements themselves they need to have the div around them.

A possible solution might be for you to do your own custom rendering of content areas, but depending on the kind of block templates you're using it can be tricky to get editing to work. The example in the link is for rendering multiple blocks of the same type.

Upvotes: 3

Ted Nyberg
Ted Nyberg

Reputation: 7401

You can use the CustomTagName and CssClass properties of the Property control to format the container element.

You may also use RenderSettings to modify container elements of child elements (where applicable).

Upvotes: 2

tompipe
tompipe

Reputation: 949

You can choose the tag using the CustomTagName attribute on the Property Control

Alternatively, if you wanted to remove the tag, you could use a control adapter. A good example is found here

Upvotes: 0

Related Questions