Edit mode-specific styling in EPiServer 7

Sometimes you need to customize how properties are rendered in EPiServer’s edit mode, particularly for content areas.

  • Ted Nyberg
  • 5 November 2013
  • 0

The problem

Let’s say we’ve created a content area and added three floating blocks to it. When rendered they look something like this:


When we enter edit mode, EPiServer adds an overlay around the content area. EPiServer tries to figure out the size and positioning of the overlay based on the child elements, more specifically the content area container.

However, in this particular case, the CSS for the content area container and the blocks makes it so that the height of the container cannot be determined.

This results in an edit overlay which does not wrap the content area:


What we want is something like this, where the edit overlay wraps the entire content area:


The solution

To achieve this we add a tiny CSS class to circumvent the problem:

.overflow-hidden { overflow:hidden !important }

Now we want to apply this CSS class in edit mode only. We do this by setting an EditContainerClass attribute when rendering our content area:

@Html.PropertyFor(model => model.MyContentArea, new { EditContainerClass = "overflow-hidden" })

This CSS class will only be applied in edit mode, and if we examine the edit mode markup closely we’ll see it in action:



There are probably neater and sweeter ways of doing this, but this got the job done! :)