Threaded Mode | Linear Mode

01-23-2011, 05:59 PM

Hi All,

I have been working with Barebones for a couple of days now, i have run into a interesting problem/bug.

when set the height of html and body to 100% using CSS in a template, in the admin interface the preview keeps getting longer and longer infinitely.
This CSS is used for a footer that is stuck to the bottom of the browser window unless the content is longer than the page then the footer is stuck to the bottom of the content. This is the page that I am trying to convert Link

this is the CSS

Code:

* {

    margin: 0;

}

html, body {

    height: 100%;

}

.wrapper {

    width:800px;

    min-height: 100%;

    height: auto !important;

    height: 100%;

    margin: 0 auto -25px; /* the bottom margin is the negative value of the footer's height */

}

.footer, .push {

    height: 25px; /* .push must be the same height as .footer */

    text-align:center;

}

and this is the template code minus the head section

Code:

<body>

#start

<div class="wrapper">

<div id="header">@mw_header@</div>

<div id="content">@mw_body@</div>

<div class=push></div>

</div>

<div class="footer">@mw_footer@</div>

#end

</body>

Any help would be super. If you need any more info let me know.

Thanks Daniel

**thruska** · 02-06-2011, 10:23 PM

Yeah, that occasionally happens and is due to the way the automatic iframe resizing code works - the preview is in an iframe and the code checks the height and makes it larger if the internal document height is a certain height compared to the iframe height so as to avoid showing scrollbars. Unfortunately, 100% height layouts cause problems with this logic.

The "fix" for the issue is to use the special-case method for alternate pre-HTML for the editor. Add an '#edit' line before the '#start' line:

http://barebonescms.com/documentation/layout_widget/

Within the #edit block, change or drop the 100% height or whatever is necessary to eliminate the infinite resizing issue - it is meant only as a preview pane anyway. On the public side, the #edit block is ignored and should appear as normal.