Help! My PageEditor is broken!


The Sitefinity page editor is not in an iframe, your page markup from your template (basically everything under <body>) 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:
busted-page-editor 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 <form> tags in your template

The page editor uses old-scholl WebForms which wraps the ENTIRE page in a <form> 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.

Did you like this post, did I help you out, are you feeling generous

  Buy me a beer