Serendipity Forums

[Don Chambers]

What determines the height of an iframe when previewing an entry in the backend? I have made a few modifications to a template, but never touched preview_iframe.tpl nor entries.tpl, yet previewing entries frequently results in a very short iframe. When the iframe is too small, simply clicking on "preview" one or more times will finally produce the correct size iframe, ie sometimes it is too short, such as:

For example, I clicked on one particular entry, and I get this for the iframe... note the style="height: 26px...):

Code: Select all

<iframe width="100%" scrolling="no" height="300" frameborder="0" title="Serendipity" marginheight="0" marginwidth="0" name="serendipity_iframe" id="serendipity_iframe" src="serendipity_admin.php?serendipity[is_iframe]=true&amp;serendipity[iframe_mode]=preview" style="height: 26px; border: 0px none;">Your browser does not support the concept of iframes. Please open your serendipity_config.inc.php file and set $serendipity['use_iframe'] variable to FALSE.</iframe>

Clicking on the preview button a few times, and I get this, which is correct:

Code: Select all

<iframe width="100%" scrolling="no" height="300" frameborder="0" title="Serendipity" marginheight="0" marginwidth="0" name="serendipity_iframe" id="serendipity_iframe" src="serendipity_admin.php?serendipity[is_iframe]=true&amp;serendipity[iframe_mode]=preview" style="height: 832px; border: 0px none;">Your browser does not support the concept of iframes. Please open your serendipity_config.inc.php file and set $serendipity['use_iframe'] variable to FALSE.</iframe>

Sometimes it works fine, and I do not need to click on preview multiple times... other times I have to preview the entry several times before it looks correct. It always looks correct on the front end. Have tried this in s9y 1.6 & 1.6.2, same result.

[garvinhicking]

Hi!

preview_iframe.tpl contains the ID of the main content div to use javascript on; you need to edit this if your template does not use the same DIV ID.

Depending on the complexity of the HTML and floatiness of DIVs maybe this is a timing issue, that the JS is not able to calculate the proper height?

Regards,
Garvin

[onli]

Maybe there are images in the entry with no height in the html whoch don't load or a js-script resizes the entry?

[yellowled]

Depending on the complexity of the HTML and floatiness of DIVs maybe this is a timing issue, that the JS is not able to calculate the proper height?

Interesting. I have experienced similar problems as Don has, but I never thought about it this way.

Don, you could try moving the whole script part right before body. I'm not sure this works in iframes (they're always a tricky thing anyway), but that way, the script calculating the height should be executed after the iframe's HTML has been rendered.

Another idea would be to rewrite the calculating script in jQuery using

Code: Select all

jQuery(document).ready(function($) {
// calculation code
});

but I'm not entirely sure that works well with iframes, either. Needs testing.

YL

[Don Chambers]

Don, you could try moving the whole script part right before body. I'm not sure this works in iframes (they're always a tricky thing anyway), but that way, the script calculating the height should be executed after the iframe's HTML has been rendered.

placing js code just before </body> seems to help - I think this should be considered in all templates. not sure if it fully solves my problem or not as the problem was intermittent. Thanks guys!

[Don Chambers]

Actually, it DIDN'T make a difference. Problem persists. It also varies by browser. I've noticed if I click preview a few times in firefox, it will finally show the iframe at the correct height. It NEVER works in safari. Those are the only browsers I have tried so far.

Any further thoughts?

[yellowled]

It also varies by browser.

Probably related to the speed of the JS engine if it's a timing issue. If so, it should tend to work better in Chrome.

Any further thoughts?

You could try

Code: Select all

<script defer>

That basically means that this script element will not be executed before all other page ressources have been loaded. Not sure how that might behave in an iframe.

If any of the container elements surrounding {$preview} are floated (which is likely in a blog template), it might help to not float them in the preview_iframe.tpl, i.e. adding inline styles to preview_iframe.tpl to overwrite it. Sometimes floated container do not span the full height of their children (google hint: "containing floats") if they're not cleared, which might happen in a preview_iframe.tpl because that usually leaves out the clearing element.

YL