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? 

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

Martin

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). 

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>