DataTables 1.7.2 with JQuery UI Themeroller column heading issue in IE

Eric

I'm using 1.7.2 with the latest JQuery UI. The issue I'm having is that in IE, the column headers are screwed up. It puts the text on one line, and the sort button on the next line. The header text is centered like it should be, and the buttons are right-aligned, just on separate lines. I've trying mucking with the CSS but haven't been able to get it fixed in IE.

Any ideas?

wired

I'd love an answer to this too. I have a similar problem, but for me it happens in all browsers, and the sort buttons are left-aligned. In addition to this, when I get to 10 or more entries, the 'entries' word in "Showing 1 to 10 of 10 entries' moves to a separate line, although there is plenty of room for it to be displayed on the first line.

wired

Woo-hoo! Got it figured out by piecing together a bunch of thread responses. Somehow my demo_table_jui.css file lost some CSS declarations. They are the ones commented as "Sort arrow icon positioning" in one of the examples. Not sure how I lost them, but I grabbed them from an earlier dev bundle and my headers and icons are back on one line.

aluferrari

Hello Wired,

We are experiencing the same issue, can you please elaborate on how you solved the issue and what code did you add to "demo_table_jui.css"?

Thanks a lot.
-Aalap

adsarasin

Hey aluferrari,

I'm not sure if you still need help on this, but I recently ran into this issue and was able to resolve it.

Open the "demo_table_jui.css" file and find this code:

[code]
/*
* Sort arrow icon positioning
*/
table.display thead th div.DataTables_sort_wrapper {
position: relative;
padding-right: 20px;
padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
[/code]

The above code will only work if your table has a class of '.display'. This is done to add specificity to CSS I suppose. To fix the issue I changed the above code to.

[code]
/*
* Sort arrow icon positioning
*/
div.dataTables_wrapper thead th div.DataTables_sort_wrapper {
position: relative;
padding-right: 20px;
padding-right: 20px;
}

div.dataTables_wrapper thead th div.DataTables_sort_wrapper span {
position: absolute;
top: 50%;
margin-top: -8px;
right: 0;
}
[/code]

Or you could just add a class of '.display' to each of your tables.

Enjoy,

Adam S.