IE8 doesn't apply css display dynamically

Question

I'm trying to develop a table that hides its columns upon a given value. I am using a solution discussed in another SO question. As part of the suggestion there they say that to support IE<8 browsers a hide rule should be used instead and show by default. (My browser is in quirks mode).

I have several hide rules that look like the following.

 table.Show1 .cellType2, table.Show1 .cellType3{
       display:none;
  }

So what I expect is cellType2 and cellType3 to hide when the className of the table is changed dynamically. With the initial values it works fine but when the className of the table changes dynamically, it hides the cells needed but it doesn't bring the other back.

I went through it with IE Developer Tool and I know that the className of the table is set properly. I also inspected the cell element's style and there is no display rule set so I would expect to display as default, but it isn't(it doesn't show up).

What I found most annoying it that if I change ANY style property in the Developer Tool, it will realize that it should be displaying the cell and then , it brings it back up.

Why the style is not applied? Please help me fix this issue.

EDIT: I'm including a "minimal" code to recreate the issue.

JavaScript:

function typeChanged(name, id)
{
   var elem =  document.getElementById(id);
   elem.className = name;
}

CSS:

table td
{
border-top: 1px none #000066;
border-right: 1px none #000066;
border-bottom: 1px solid #000066;
border-left: 1px solid #000066;
}
table.Show1 .cellType2, table.Show2 .cellType1{
       display:none;
 } 
 table.Show1 td,table.Show2 td
 {
border-style: solid solid solid solid;
border-width: 1px;
 }
  table.Show1 th,table.Show2 th,table.Show1,table.Show2
  {
background: transparent none repeat scroll 0% 0%;
color: #000066;
border-style: none none none none;
table-layout: fixed;
   }

HTML:

<select onChange="typeChanged(this.options[this.selectedIndex].value,'mytable')">
    <option value="Show1">Show1</option>
     <option value="Show2">Show2</option>
</select>
 <table id="mytable" class="Show1">
    <tr>
       <th class="cellType1">type1</th>
       <th class="cellType2">type2-a</th>
       <th class="cellType2">type2-b</th>
     </tr>
     <tr>
        <td class="cellType1"><input type="text"></input></td>
        <td class="cellType2"><input type="text"></input></td>
        <td class="cellType2"><input type="text"></input></td>
     </tr>
  </table>

Its funny that I tried creating a JSFiddle for this. But the site doesn't support IE8. jsfiddle.net/SaaYM — Sednus
– Sednus, Commented Mar 20, 2013 at 22:07
From what I recall, IE8 and down just has a really hard time dynamically updating the table when you are showing/hiding rows. One workaround I used at one time, was to wrap all TD content in their own containers, then show/hide the content of the TR and then instead of removing the TR, change the height to 1px . — DA.
– DA., Commented Apr 9, 2014 at 3:15

swider · Accepted Answer · 2013-03-20 00:57:50Z

2

It sounds like it's not repainting the table. There are several IE 7 & 8 repaint and reflow oddies out there...

You can try forcing the repaint in your javascript, maybe just by hiding and showing the table with something like

document.getElementById('myTable').style.display='none';
document.getElementById('myTable').style.display='table';

or forcing a reflow on the entire page with something like

document.body.className=document.body.className;

answered Mar 20, 2013 at 0:57

swider

3,4542 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sednus Over a year ago

Thanks for the suggestion, still doesn't redraw the cells. Even when I can see the correct style applied to the <td>s

Sednus · Accepted Answer · 2013-03-25 12:01:14Z

1

It appears that there is a problem when trying to repaint the cells. Just from the CSS rule doesn't work but if we apply the display directly in the JavaScript then the cells are drawn properly. Looping trough the cells and applying the style directly works, I just had to have a name convention to easily identify the class that a cell is supposed to be.

    if(isEmpty(cell.className)|| cell.className == (selectedType+"_cell"))
    {    
      cell.style.display = 'table-cell'; // might be different for other IE versions
    }
    else
    {
        cell.style.display = 'none';
    }

answered Mar 25, 2013 at 12:01

Sednus

2,1331 gold badge18 silver badges36 bronze badges

Collectives™ on Stack Overflow

IE8 doesn't apply css display dynamically

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related