Help! My PageEditor is broken!

Background

The Sitefinity page editor is not in an iframe, your page markup from your template (basically everything under

) is wrapped in a few helpers that let Sitefinity inject the toolbar and it’s publishing headers. So this can cause some issues with your styling, PLEASE for the sake of your users fix this for them so it doesn’t look sloppy. What’s great about it not being in an iFrame though is you can almost literally control everything you see in CSS.

Here’s a great example:
So there are a few things to check

Script errors

It’s easy to identify a script error as the culprit as usually there will not be any buttons on the top toolbar, OR the buttons do nothing. Just open your browsers javascript console and look for script errors and resolve. Maybe its just as simple as commenting out an included JS file in Design mode?

Make sure your markup is valid

By this I mean the markup in your default.cshtml or whatever your main template is. If there’s a starting div without and end that can break things. Or if there’s maybe an element that should be closed (>, />) but isn’t the browser can try to “fix” it and throw things off

Make sure you don’t have any
tags in your template

The page editor uses old-scholl WebForms which wraps the ENTIRE page in a

tag so the nested tags can be problematic.

Hunt down conflicting styles

Right-click somewhere on the page, click Inspect, then in the browser dev tools just start looking around and trying to find any conflicting styles. Maybe you shouldn’t be doing position: absolute somewhere, or maybe it’s an overflow rule, or even a box-sizing. If 1&2 are fine then this is usually the reason.

The good news is Sitefinity puts “sfPageEditor” as a class onto the body tag so you can override the styling as needed in the page editor. Maybe you need to hide a problematic element?

.sfPageEditor .nav .mySearchBar{
   display: none;
}

Really you can do anything once you know .sfPageEditor is there. There’s even an extra class to let you know which editor you are on.
Widget mode: body class=“sfPageEditor zeContentMode”
Layout mode: body class=“sfPageEditor zeLayoutMode”

So to re-iterate for the sake of your users editing experience PLEASE try to add a few of these rules to improve their editing experience. Usually it only takes one or 2, but it can make the difference between a happy client or a frustrated client.

Background

Script errors

Make sure your markup is valid

Make sure you don’t have anytags in your template

Hunt down conflicting styles

Boost your online presence.

Make sure you don’t have any
tags in your template