Problem with previewing pages in edit mode of EPiServer 7



We're experiencing problems with previewing our pages when in edit-mode. The content of the pages ends up way out to the right of the screen so to be able to see the content we have to scroll to the right. As far as I can see in the rendered HTML of EPiServer the reason for this problem is that some kind of IFrame that EPiServer uses to show the preview of the page gets, in our case, the width 14458px. The id of the iframe that gets this width is in our case "epi_local_AutoResizingIframe_0" so I'm a bit curious about what "AutoResizingIframe" in this case does? Has anyone else experienced this problem?

Best regards


Mar 08, 2013 16:46

The auto resizing iframe is a part of a widget that has an iframe and an overlay. The iframe shows the content page and the overlay hosts the property overlays, i.e. the clickable areas which will open property editors. We used the overlay solution for handling drag and drop, scrolling and also as a way to make the templates not require any special epi JavaScript in edit mode. The property overlays is positioned to cover the editable (and visible nodes) in the template. And the iframe is actually resized to fit the content of the page. That's expected. We do some tricks to get scrolling right.  

I haven't seen a behavior like you describe with the iframe. What more can you tell me about HTML and CSS of that page? 


Mar 12, 2013 18:04

Hello Per,

I believe I've managed to pinpoint what's causing the problem to occur. As our first element on the page we have a <header>-element and connected to this we have the following css:

header::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 999em;
	height: 16px;
	background-color: rgb(30,148,30);


This will result in a long line in the top of the page, in this case most certainly wider than what the screen is, don't ask me why it's done like this, I will have a talk with our frontend developers on monday :-)

However, it would be interesting to know why this css, that worked fine in EPiServer 6 doesn't work in EPiServer 7?

Best regards


Mar 22, 2013 17:39

In 6 the iframe was the viewport that has scrollbars. In 7 the iframe is resized and doesn't have the scrollbars. As we do that resize calculation in JavaScript, the scrollWidth will be very large for a page with a wide element as yours. And when the content is centered in the middle it will be centered in a very wide iframe.  

Instead of setting a fixed width you could use width: 100% or set right: 0; (without any width). 

Mar 27, 2013 16:15

I've had the exact same problem, in my case it was a Facebook login button (created with FBML) that caused the exact same problem described above.

<fb:login-button autologoutlink="true" perms=""></fb:login-button>

Oct 25, 2013 14:26
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.