Closed Bug 281669 Opened 20 years ago Closed 20 years ago

After setting display:block from display:none, table doesn't redraw properly

Categories

(SeaMonkey :: General, defect)

Product:
SeaMonkey
Component:
General
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED INVALID

People

(Reporter: randyl, Unassigned)

Details

User-Agent:       Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322)
Build Identifier: Mozilla 1.7.3

I have a table in which I want to set one of the rows display to none or block 
based on a users selection, to essentially collapse that row. 

When I set the display:none and then back to display:block, the table doesn't 
redraw properly. Is seems like a placeholder gets added to the row everytime I 
toggle between none and block.

I've tried this on Opera and I.E. and the table seems to display properly 

<html>
   <head>

      <script>

         function hideShow(){
            var objRow =  document.getElementById("tr1")
            if( objRow.style.display == 'none' ){
               objRow.style.display = 'block';
            }
            else{
               objRow.style.display = 'none';
            }
         }


      </script>
   </head>


   <body>
      <table id="tbl1" name="tbl1" border="1" width="200" height="400">
         <tr id="tr2"><td>unhide him </td></tr>
         <tr id="tr2"><td>unhide him </td></tr>
         <tr id="tr2"><td>unhide him </td></tr>
         <tr id="tr1" style="width:100;background-color:red"><td 
style="width:100;background-color:yellow">adaf</td></tr>
         <tr id="tr2"><td>unhide him </td></tr>
         <tr id="tr2"><td>unhide him </td></tr>
         <tr id="tr2"><td>unhide him </td></tr>
      </table>
      <input type="button" value="show/hide" onclick="hideShow()"/>
   </body>
</html>

Reproducible: Always

Steps to Reproduce:
1. load the attached html into your browser
2. click on the show/hide button
3. watch in awe as your table grows unbounded..

Actual Results:  
the row is added back to the table, like literally.  A placeholder seems to be 
added each time you toggle.

Expected Results:  
The row should collapse and/or uncollapse.

problem occurs in Mozilla and firefox
> I have a table in which I want to set one of the rows display to none or block 
> based on a users selection, to essentially collapse that row. 

There is a CSS2 property for this: visibility: collapse; and it works
accordingly for rows for Mozilla-based browsers.
http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility

> When I set the display:none and then back to display:block, the table doesn't 
> redraw properly. 

For row, the correct display property value is "table-row" and it is supported
by Opera 7.x and Opera 8 (and maybe Safari 1.x ?).
http://www.w3.org/TR/CSS21/visuren.html#propdef-display

> 
>          function hideShow(){
>             var objRow =  document.getElementById("tr1")
>             if( objRow.style.display == 'none' ){

You need to fork your code here to detect browsers accordingly.

>                objRow.style.display = 'block';

Have a look at this page:
Interactive page on table row and column collapse and visibility
http://www.gtalbot.org/HTMLJavascriptCSS/TableRowColumnCollapse.html

Finally, your markup code is invalid because
1- id attribute values must be unique; in your code, 6 table rows have the same
id attribute value
2- <input type="button" value="show/hide" onclick="hideShow()"/> is wrong in HTML 4

Resolving as INVALID
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.