180258 - Problems with switching between CSS "display:none" and "display:block" for element

Status: RESOLVED DUPLICATE of bug 143397

(Core :: Layout: Tables, defect)

Description

[Sonam Chauhan]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.1) Gecko/20020830
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.0.1) Gecko/20020830

There are two problems concerning table row that are hidden ("display:none") or
made visible ("display:block") by using Javascript to modify the CSS style for
the row.

1. When a two column row style is made visible, it occupies only one column
instead of two.
2. As a row is hidden and made visible, each change adds a space to the bottom
of the row. This space keeps growing according to the number of times the
display property is toggled.


Reproducible: Always

Steps to Reproduce:
1.Open test case file (will be attached to bug)
2.Select the "**CUSTOM" choice in the "Time Period" list box. Two rows are now
made visible. Problem #1 - column sqeezing - can now be observed.
3.Now choose some other choice in the "Time Period" list box. The two rows below
now disappear. 
4. Repeat Steps 2 and 3. Problem #2 - white space growth - can now be observed.

Actual Results:  
Problems were observed. 


Expected Results:  
1. Displayed the "From Date" and "To Date" rows using two columns (IE 6.0 does
this correctly)
2. No whitespace growth should occur. (IE 6.0 does this correctly)

Comment 1

[Sonam Chauhan]

Attachment: Test case for bug.

This is the test case, referred to in bug description.

Comment 2

[Boris Zbarsky [:bzbarsky]]

> or made visible ("display:block")

You meant "display: table-row" right?  See
http://www.w3.org/TR/CSS21/visuren.html#propdef-display (and yes, IE has really
broken support here).  Just using .style.display = "" will work in IE and
Mozilla both for now....

That said, you are correct that there should be no growth. But the row _should_
only occupy one column, since we have to create an anonymous table row and table
cell around the block, then create an anonymous table and table row inside the
block to hold the table cells.  But in the outer table you have a table row with
a single cell in it, with a block inside.

Marking duplicate of the bug on the space growing.

*** This bug has been marked as a duplicate of 143397 ***

Comment 3

[Sonam Chauhan]

> > or made visible ("display:block")
> 
> You meant "display: table-row" right?  See 
> http://www.w3.org/TR/CSS21/visuren.html#propdef-display (and yes, IE 
> has really broken support here).  Just using .style.display = "" will 
> work in IE and Mozilla both for now....

Cool, Thanks! That workaround works well. I wasn't thinking about "display:
table-row" or even CSS 2 at all - I was trying to use only CSS 1 here (
http://www.w3.org/TR/REC-CSS1#display ) which only gives a choice of "block |
inline | list-item | none"

> That said, you are correct that there should be no growth. But the row 
> _should_ only occupy one column, since we have to create an anonymous 
> table row and table
> cell around the block, then create an anonymous table and table row inside
> the
> block to hold the table cells.  But in the outer table you have a table
> row with
> a single cell in it, with a block inside.

Hmm. Thank you for the detailed explanation.  But if the outer table has a table
row with a single cell in it, wouldn't it be right for the cell to stretch the
width of the table. Why would the cell arbitrarily bounded by the _first_ column
of the outer table?

Again, Thanks for your help and Cheers! You're doing a great job. 
Sonam

Comment 4

[Boris Zbarsky [:bzbarsky]]

Well, CSS does have a concept of cells spanning multiple columns, but it depends
on the document language (eg the colspan attr in HTML) to specify this. 
Anonymous cells don't span by default.

The whole thing is rather underdefined in many ways, and mail to
[e-mail] with improvement suggestions is welcomed.  ;)