-1

When i put blocks inside my contentarea the blocks align just fine but inside of edit-mode the "edit-boarder" gets messed up.

Does anyone have any idea how to figure this out?

See picture for more details

http://postimg.org/image/7wyue4nvv/

Code for contentarea, block and css:

http://pastebin.com/BsZQQ6b1

Best regards Simon

SimEkh.
  • 1
  • 2

2 Answers2

0

This is usually because of using float without using clear. I have solved similar problems by writing something like:

@if (PageEditing.PageIsInEditMode)
{
   <div class="clearfix"></div>
}

in the view.

If the error is inside a ContentArea you can use a custom ContentAreaRenderer to change the markup. See below for an example:

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/BootstrapAwareContentAreaRenderer.cs

https://github.com/valdisiljuconoks/EPiBootstrapArea/blob/master/Initialization/SwapRendererInitModule.cs

I have this code in my ContentAreaRenderer at the bottom of the RenderContentAreaItems method:

if (PageEditing.PageIsInEditMode)
{
   var clearDivTag = new TagBuilder("div");
   clearDivTag.MergeAttribute("style", "clear: both;");
   htmlHelper.ViewContext.Writer.Write(clearDivTag.ToString());
}
Andreas
  • 1,355
  • 9
  • 15
0

My solution

The main issue was to fully understand how episerver renders content areas and the blocks in coherence with css. It’s important to check the html that epi renders out to the browser, which will be one div for the content area itself, one extra generated (that IS needed and that epi said them self that they chose to render out and you cant do anything about it) div for the editmode wraper, and then your block.

In edit-mode the sites content is actually iframed in, and will as a result load after the epi-edit wrapper of each individual block. If your blocks look like mine, floated, the epi-wrapper will act as with any floated element and not understand the height of the content. Long story short; add a class to the content area tag with style "overflow: hidden;" to fix the floating, then remove your blocks wrapper div (which isn't needed) and use the epi-rendered div for that! Do this with the anonymous object you can put on the content area render tag, like so: new { CssClass = "classnamewithoverflow", ChildrenCssClass = "blocknamewithfloat" } ).

This obviously only works smoothly with blocks of the same width, but making different block-widths work is another story :-)

SimEkh.
  • 1
  • 2