Help! My PageEditor is broken!
BackgroundThe 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:
So there are a few things to check
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?
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.