CODEWITHSUNDEEP
cssinternet-explorercustom-data-attribute
dimshik
dimshik

Reputation: 1271

CSS styling via data attribute is not working properly on IE

I have a list with data attribute "data-layout", it can get two options "vertical" and "horizontal".

In my CSS i change the list items display property according to the layout.

On chrome it works as expected but on IE (tested on IE11) it does not redraw the screen with the change.

If i enter IE's devtools and select on of the items in the elements panel then only it redraws to the correct state.

Here is a reproduction of the problem.

http://fiddle.jshell.net/dimshik/bss3je3u/

Thank you. 

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.dataset.layout = 'horizontal';
    } else {
        list.dataset.layout = 'vertical';
    }  
});
[data-layout="horizontal"] li {
    display: inline;
    padding: 0 10px;
}
<ul id="list" data-layout="vertical">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<br>
<br>
<button id="toggle">Toggle Layout</button>

Upvotes: 4

Views: 2762

Answers (3)

Chetan Chandrashekar
Chetan Chandrashekar

Reputation: 198

For some reason IE11 doesn't repaint dom when HTMLElement.dataset is used in Javascript

For Example the below snippet doesn't work on IE11 when you click the button - box color doesn't change from red to blue as expected.

To fix this use test.setAttribute('data-action','style'); instead in the button event listener.

var button = document.getElementById('check');
var test = document.getElementById('test');
button.addEventListener('click', function(evt) {
  test.setAttribute('data-action', 'style');
});
#test {
  width: 200px;
  height: 200px;
  background-color: red;
}

#test[data-action="style"] {
  background-color: blue;  
}
<div id="test"></div>
<button id="check">Click Me</button>

Upvotes: 3

thecraighammond
thecraighammond

Reputation: 850

This seems like IE isn't seeing that it needs to redraw.

Here's a slightly inelegant approach, but it illustrates the issue.

Adding a function to hide then immediately show to element that should change forces a redraw and the update appears to work. I'm not sure you'll be able to take this exact thing forward - you may need to choose a different way of forcing a redraw or it may work out that the styles you eventually apply force a repaint so you can lose this altogether, but it does at least perform the switch now.

document.getElementById('toggle').addEventListener('click',function(){
    var list = document.getElementById('list');
    if(list.dataset.layout == 'vertical'){
        list.dataset.layout = 'horizontal';
    } else {
        list.dataset.layout = 'vertical';
    }

    list.style.display = "none"
    list.style.display = "block"    
});

Upvotes: 1

Roni
Roni

Reputation: 3336

It seems dataset is changing, but not re-rendering the css.

I've changed your code to setAttribute and it worked (IE11);

http://fiddle.jshell.net/bss3je3u/2/

Upvotes: 7

Related Questions