3

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>

Krzysztof Morcinek
  • 1,011
  • 13
  • 42

6 Answers6

3

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.

tentonipete
  • 5,080
  • 4
  • 25
  • 22
  • I don't understand how this is not a more discussed issue, took me ages to find the reason/solution. It really seems to be happening "auto-magically" for the lesser knowing. I guess most people just do it right.. – Camathon Nov 04 '14 at 12:24
2

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).

Ted Nyberg
  • 7,001
  • 7
  • 41
  • 72
2

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)
    }
  }
}
Oleksandr Kucherenko
  • 1,921
  • 1
  • 17
  • 21
0

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

tompipe
  • 949
  • 6
  • 8
  • can you please provide an example on which PropertyControl (I am quite new) I can set it. I have a property of type ContentArea like below and on that property I drag shared blogs in EditMode. On which element I can set it. – Krzysztof Morcinek Jan 16 '13 at 21:10
  • div can be any html tag – tompipe Jan 17 '13 at 16:20
0

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 ?

Jon Jones
  • 1,014
  • 1
  • 9
  • 17
0

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>
Stureman
  • 1