repeatedly toggling style.display on <TR> incrementally increases horizontal space

RESOLVED INVALID

Status

()

Firefox
General
RESOLVED INVALID
14 years ago
14 years ago

People

(Reporter: Troy Larson, Assigned: Blake Ross)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

14 years ago
User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10

Using the example code below, each time Row 2 is hidden, Row 3 is pushed down
further. The page works fine in Internet Explorer.

In addition, Row 2 is slightly indented. It should appear flush with Rows 1 and 3.

<script>
function toggle(idname)
{
    document.getElementById(idname).style.display =
(document.getElementById(idname).style.display == 'none') ? 'block' : 'none';
}
</script>
<A HREF="javascript:toggle('test')">Toggle Row 2</A>
<TABLE>
<TR><TD>Row1</TD></TR>
<TR id="test" style="display:none"><TD>Row2</TD></TR>
<TR><TD>Row3</TD></TR>
</TABLE>

Reproducible: Always
Steps to Reproduce:
1. Load the example code.
2. Click "Toggle Row 2" repeatedly (5-6 times).

Actual Results:  
Row 3 keeps getting pushed down.

Row 2 is slightly indented.

Expected Results:  
1. Row 3 should have moved back up to its previous position.
2. Row 2 should appear flush with rows 1 and 3.

Comment 1

14 years ago
That's because the default value of a table row is "table-row", not "block".

Toggle between none and "" to get a result that works cross-browser, since IE
will not understand table-row.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 14 years ago
Resolution: --- → INVALID
Created attachment 161991 [details]
TestCase. Try to switch many times

After hide/show increases blank spaces
You need to log in before you can comment on or make changes to this bug.