Filter input fields too long in IE

[dkunzler]

We're using iron-data-table in our project and want to make it compatible with IE 11.
Unfortunately the input fileds for filtering are too long (depending on the number of columns) which results in the sorting arrows not being seen.

Problem can even be reproduced on the demo page with IE 11.
https://saulis.github.io/iron-data-table/demo/filtering.html

Last table on the page looks like this in IE:

This is how it looks in Chrome and how I would expect it to look:

Any thoughts or comments on that?

[Saulis]

Hi!

I recommend defining a custom template for the headers and figuring out styles which work also for IE11.

[KnottStudios]

something like this in your shared-styles.html will fix it:

data-table-column-sort {
margin-left: -20px;
z-index: 10;
}
data-table-column-filter {
width: 95%;
}

[dkunzler]

Thanks @KnottStudios it worked. Since it is a bit more ugly in terms of spacing than the original in Chrome I put it into a media query for IE like so:

       @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
            data-table-column-sort {
                margin-left: -20px;
                z-index: 10;
            }

            data-table-column-filter {
                width: 95%;
            }
        }