YUI Editor Does Not Hide Properly

October 9, 2008

I tried to use a YUI Rich Text Editor inside a YUI Panel that starts out hidden. However, some of the time, the place that the YUI Editor occupies was covered with a white square, even when the panel was hidden.

This example┬áby Dav Glass provides the solution. IE6 does not properly handle visibility:hidden for iframes. The solution is to position the iframe offscreen when it’s hidden, and restore it when it’s shown again.

Unnecessary CSS Expressions

July 17, 2008

A full-page-body iframe was being sized correctly in IE but incorrectly in Firefox – it seemed to be just the default arbitrary small iframe size. Turns out the iframe had its width and height set by CSS expressions, so that it could fill up the full size of the document, minus sidebars, headers, etc. But CSS expressions aren’t supported in Firefox 2.

The solution for the width was simple, though, because the page design is fixed-width. There’s no reason to include a CSS expression when you can just set the width to an exact numeric value. It’s not like this code is reused in other locations that might have different sizes.

The height did still need to be dynamic, though, so JavaScript was the solution here. The document.body.clientHeight property seemed to be the most reliable way to get the window height, so I created some JavaScript code to recalculate the iframe height on page load and on resize. Just used a simple method to unobtrusively add the onLoad handler, and an analogous method for onResize.