Hidding and Displaying multiple cells rows using style.display doesn't work properly.

RESOLVED WORKSFORME

Status

()

RESOLVED WORKSFORME
17 years ago
17 years ago

People

(Reporter: stephane.vinsot, Assigned: attinasi)

Tracking

Trunk
x86
Windows 2000
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

17 years ago
From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)
BuildID:    2001101117

I need to hide or display table rows dynamically. For that, i use the 
style.display property putting it to "none" or "inline" for a row.


when i try to hide the line, or to display it back, the full table is jammed.

It seems to work only if there's a single cell in the row.

NB: the same code is working fine with IE 5+

Reproducible: Always
Steps to Reproduce:
1. Load the code below
2. click the "Hide" button
3. click again the "Hide" button (if you can find it ;)


Actual Results:  the full table is jammed when i display back the row

Expected Results:  The row is displayed at its first place

<html>
<head>
<title> Mozilla style.display Bug </title>
</head>
<body>
	<form>
	<table align="center" BORDER=1>
<SCRIPT>
disp=true;
function ButtonClicked()
{
	if (disp)
	{
		document.getElementById("rowID001").style.display="none";
		disp=false;
	}
	else
	{
		document.getElementById("rowID001").style.display="inline";
		disp=true;
	}

}
</script>
	<tr id="rowID001"><td><input type="checkbox"></td><td><input 
type="input"></B></td></tr>
	<tr><td><input type="button" value="hide upper row" 
ONCLICK="ButtonClicked();"></td></tr>
	<tr><td><input type="submit" name="Move" Value="submit"></td></tr>
</table>
<SCRIPT>
</SCRIPT>
	</form>
</body>
</html>
I think this is working correctly per the CSS2 table model. Table rows are not
inline, they are table-row, and I think anonymous table row and cell content is
created every time you "inline" the <tr> with JS.  If you replace
style.display="inline" with style.display="table-row", the desired effect is
produced.

Resolving INVALID.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 17 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

17 years ago
I made the change to "style.display="table-row" " and it still doesn't work.
It's just a bit better with my full application (different from this exemple).

You just have to change the tag in the same exemple to reproduce the problem.

Regards
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Could you provide a testcase? Also, please see
<http://www.w3.org/TR/REC-CSS2/visuren.html#propdef-display> for the proper
display property to set on various tabular elements.

I'll attach the testcase with display alternating between "hidden" and
"table-row", which doesn't cause any odd effects that I can see.
Created attachment 57502 [details]
Testcase with display: none and display: table-row
(Reporter)

Comment 5

17 years ago
Created attachment 57507 [details]
Screen capture before i click
(Reporter)

Comment 6

17 years ago
Created attachment 57508 [details]
Screen capture after i click twice on the "hide" button

There is a little jam when i click the first time on the button, but it's very
more spectacular the second time.
(Reporter)

Comment 7

17 years ago
I still have the problem (see GIF attached). And even on a second computer 
under Windows XP
Is there a problem with the build 2001101117 ?

The only problem with it is that it's pretty old.  Please retest with a nightly
or the upcoming 0.9.6

Comment 9

17 years ago
Marking this wfm in the Nov 14th build (2001-11-14-05)
Status: UNCONFIRMED → RESOLVED
Last Resolved: 17 years ago17 years ago
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.