Pagination styling problem with IE9

greenflash

Using IE9, if you go to the horizontal scrolling example (http://www.datatables.net/examples/basic_init/scroll_x.html) and page through the table, the footer and info underneath the table jump up and down as you page through the table. Page for example to entries 21 to 30 when show entries is set to 10.

This problem doesn't happen with Firefox, nor indeed with IE8.

Campbell

trongtin

I got a same bug on horizontal scrolling with IE9. And I also met another bug: when I hovered on one row of datatables, the pagination was broken (jump down) and it would be right as I hover out the datatable. It doesn't happen with FF, safari, opera or IE7,8.

Tin Le

allan

Sounds to me like the column widths are changing on each draw. DataTables does try its best to stop this form happening by setting the column widths, but the calculation isn't always perfect (indeed, there isn't always a perfect solution). Sometimes you need to give DataTables a hand by setting white-space:nowrap in the CSS for the table, or applying a width to the columns.

Allan

ve1es

Allan,

Here is an example of the issue reported by trongtin: http://live.datatables.net/omasod/edit#preview
Try hover over the very first row and check how footer behaves. It happens in IE9 only.
I had to remove css classes from the row in order to reproduce the issue.

gcutts

Hi everyone,
I'm just writing to see if there has been any development on this issue. I set all td elements of the table to be white-space:nowrap but that didn't fixt the problem. If I have a certain number of fields showing it will work. Once I go over a certain number of columns the problem returns. I know this is a vague description but perhaps someone else has noticed this sort of behavior. I will get back to debugging but am hoping someone has a solution to save me some dev time.

Thanks for your attention.

Gordon

p.s. Datatables is a fantastic tool. My sincerest thanks for all your efforts Allan.

NOTE: I found my issue. I was using fixed first column and added a hover event to each row to toggle a css class when hovering. The hover event was added to the fnRowCallback event of the DataTable. I went to pure css for the hover event instead and it worked.

HumbPo

I was having this issue, too. I found two different solutions, both of which seemed to work:

SOLUTION 1
=========
I added the X-UA meta attribute:
[code][/code]

SOLUTION 2
=========
In my CSS I had a selector like this:
[code]table.dataTable tbody tr:nth-child(odd) td[/code]

I was able to resolve the problem by ADDING a CSS rule with this selector:
[code]table.dataTable tbody tr:nth-child(even) td[/code]

ve1es

Here is my fix. The idea is to assign fixed height to .dataTables_scrollBody element
[code]
$.widget("XXX.xxxDataTable", {

_create: function () {
var self = this;


switch (self.options.sScrollX) {
case "100%":
$(window).bind("resize", function (e) {
if (self.element.is(":visible")) {
self.adjustColumnSizing();
}
});
break;
}
var dataTable = self.element.dataTable(self.options);
self._adjustScrollBodyHeight();
},

_getDataTable: function () {
return this.element.is("table.dataTable") ? this.element : this.element.find("div.dataTables_scrollBody > table.dataTable");
},

adjustColumnSizing: function () {
var dataTable = this._getDataTable();
if (dataTable.length) {
this._adjustScrollBodyHeight(true);
dataTable.dataTable({ bRetrieve: true }).fnAdjustColumnSizing();
this._adjustScrollBodyHeight();
}
},

_adjustScrollBodyHeight: function (reset) {
var self = this;
if (self.options.sScrollX == "100%" && $.browser.msie && $.browser.version == 9) {
var $scrollBody = self.element.closest(".dataTables_scrollBody");
if ($scrollBody.length) {
$scrollBody.css("height", reset ? "" : $scrollBody.height());
}
}
}
}
[/code]