Monday, April 28, 2008

Toggling display property on TD element in Firefox has unexpected results

I just encountered a really odd behavior in Firefox.  Basically I was toggling the display property between none and block on a TD element via script:

el.style.display = 'none';
el.style.display = 'block';

The element defaulted to style="display:none".  The first round worked as expected, but after showing and hiding it over and over the results were either that the height kept growing, or the TD element was moving to the right and causing the table to exceed its boundaries.

The solution ended up being to just toggle it between "none" and "":

By default:

<td style="display:none" id="el">

To show it:

$get('el').style.display = '';

To hide it:

$get('el').style.display = 'none';

I'm still not sure what the exact problem was, but maybe this will help someone else out in a jam...