Layout problems with show/hide div in td

[Andy Cordwell]

Hi all,

I've got a pair of DIVs in a TD, which a toggle the style.display
attribute on to simulate an expand/collapse section effect. I am seeing
occasional layout glitches under Firefox 1.5.0.11 in FC4, and 2.0.3 in
XP, but not in Explorer 6, Opera 9.2 or Konqueror 3.4.0-5.

I'm struggling to fix this so would appreciate any suggestions.

XHTML structure is as follows:

<table>
<col /><col />
<tr>
<td>
<!-- Button with onclick to JS to toggle .style.display state
(none | block) of collapsed / expanded divs-->
</td>

<td>
<div id='collapsed_x'>
<!-- Contains a table, with 'summary' (collapsed) content -->
</div>
<div id='expanded_x'>
<!-- Contains a table, with 'detailed' (expanded) content -->
</div>

<!-- JS to set initial .style.display state of both divs-->
</td>
<tr>
</table>

There are two (intermittent) symptoms:

* When the expanded div is shown the row height does not grow to the
size of the new content - the expanded div content is drawn over the top
of rows below.
* When the expanded div is hidden row height does not collapse.

http://www.oddlight.plus.com/ff_issue/failed.htm

The link above shows the problem (excuse the layout and extraneous divs
- I've stripped the code back). It is intermittent, but I can reliably
reproduce with the following:

1/ Set FF window tall and narrow. I used 283x928.
2/ Start the top and click each Edit button twice in turn. I see at
least one layout issue within a dozen clicks.

I have tried the following without success:

* Causing a reflow on each change, by resetting the class of a body
using Javascript, or by setting innerHTML to self.
* Removing the DIV about to be drawn from the DOM then re-adding it in
the same place.

I have not see problems if I simply replicate the xhtml for first row
many times, which suggests the column width may play a part.

The page validates successfully, and I don't see any JS errors.

I don't have a lot of HTML / CSS experience - does anyone have any
insights or ideas about how to correct this issue?

Regards,

Andy

[Martijn]

This seems to be fixed on trunk, could you also test?
http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

You could try and 'fix' this issue perhaps by calling .offsetHeight
Otherwise, you could do a .style.outline='1px solid transparent' and
then a .style.outline='0px' to force a reflow.

Regards,
Martijn

2007/4/30, Andy Cordwell <andy.c...@onelan.co.uk>:

> _______________________________________________
> dev-tech-layout mailing list
> dev-tec...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-tech-layout
>

--
Martijn Wargers
Help Mozilla!
http://weblogs.mozillazine.org/qa/
http://www.mozilla.org/contribute/
http://wiki.mozilla.org/Mozilla_QA_Community

[Andy Cordwell]

Martijn,

Thanks for your comments.

I also can't reproduce the redraw problem in Firefox (Minefield)
3.0a5pre in Windows XP.

Our users predominately use Firefox 1.5 (migrating to 2.0 over time), so
I need a fix/workaround for these versions.

I have tried forcing a reflow by changing the .style.outline property of
the div (see below), and this has no affect. I've also tried swapping
the style class on the document body with no affect. Slightly resizing
the window forces a reflow (obviously!) and the document does reflow
correctly in this instance.

Its as if the layout engine is sometimes calculating the height of the
contained div incorrectly when the elements in the div require
wrapping. Is there anyway to force a recalculation (basically
simulating what happens when the window is resized)?

I'm not sure how to use .offsetHeight to 'fix' this issue? Could you
give my limited knowledge of CSS/HTML a push in the right direction ;)

Regards,

Andy

function showElementPolicy( element_id )
{
document.getElementById( element_id ).style.display = "block";

// Forcing a reflow does not fix the problem...
document.getElementById( element_id ).style.outline='1px solid
transparent';
document.getElementById( element_id ).style.outline='0px';
}

function hideElementPolicy( element_id )
{
document.getElementById( element_id ).style.display = "none";

// Forcing a reflow does not fix the problem...
document.getElementById( element_id ).style.outline='1px solid
transparent';
document.getElementById( element_id ).style.outline='0px';

[Martijn]

2007/5/1, Andy Cordwell <andy.c...@onelan.co.uk>:
> Martijn,

> I'm not sure how to use .offsetHeight to 'fix' this issue? Could you
> give my limited knowledge of CSS/HTML a push in the right direction ;)

This seems to make it work correctly on branches (at least for me):

function toggle( collapsed_id, expanded_id )
{
collapsed_element = document.getElementById( collapsed_id );
expanded_element = document.getElementById( expanded_id );
if ( expanded_element.style.display != "none" )
{
showElementPolicy( collapsed_id );
collapsed_element.offsetHeight;
hideElementPolicy( expanded_id );
}
else
{
showElementPolicy( expanded_id );
expanded_element.offsetHeight;
hideElementPolicy( collapsed_id );
}

return true;
}

Regards,
Martijn

> Regards,
>
> Andy

[Andy Cordwell]

Martijn,

Ahh - simply calling .offsetHeight - that I can manage! I was assuming
I had to actually do something complex with the return value ;)

Calling .offsetHeight did the trick - thanks for your help.

Regards,

Andy