Strange behavior in IE9 with sScrollX

MarkCB

I'm running into a strange issue with a table I've created. The problem I'm having is that the bottom of the table (where the pagination controls are) is becoming "detached" from the rest of the table. When the table is first drawn everything looks fine. When I switch from page to page in the table the bottom section will move one or more lines away from the rest of the table with each page change. Even worse, I am using CSS to highlight the current row when the mouse hovers over it.

[code]
table.dataTable tr.odd:hover{
background-color: #87B6D9;
}

table.dataTable tr.even:hover {
background-color: #87B6D9;
}
[/code]

Every time I move the mouse cursor from one row to another, the bottom section moves one additional line away from the rest of the table. This can result in numerous lines of blank space over time. If I move the mouse cursor outside of the table area the bottom section returns to its correct position.

This behavior only happens with IE9. IE8, Firefox, and Chrome all work fine. I'm using DataTables 1.9.3 (also tried 1.9.1) with the JQuery UI styling, ColVis, ColReorder, and sScrollX. I have tried disabling all of these, but the only one that makes the issue go away is removing the sScrollX setting. The problem also goes away if I leave sScrollX set but remove enough columns from visibility with ColVis that the horizontal scroll bar goes away. The only JavaScript events that trigger on the table are for clicks on rows, and I have removed that as well.

I have examined the DOM when the error is occurring, but nothing seems to change. No additional elements are added, and no classes or styles change on any elements.

Has anyone else encountered this?

jgrobertson

I have a similar problem that seems to be resolved by the same fix.

We have a table that is filtered using checkboxes, and when it's redrawn and the filter returns no results and the table collapses to one row, the bottom pagination and result count takes a few seconds to finish collapsing and move to the new bottom of the table.

I can't post an example of the application, unfortunately, but I can try to cook up a fiddle later.

rmzpfef

Hi, I have a similar problem. I found someone else with this problem and adding a min-height:0% to the container element helps. Here is a link to it [quote]
http://blog.brianrichards.net/post/6721471926/ie9-hover-bug-workaround
[/quote]

I have a second weird problem. My rows have clickable links. When I mouse over these links the datatable container collapses to just a horizontal scroll bar! I notice that when first drawn, it displays horizontal and vertical scroll bars! It normally does not do that (ie, chrome, firefox, etc).

And as the original poster explained if I remove scrollX option it behaves itself! Of course since my content is wider than the screen it is clipped on the right!

This only happens with IE9!! I hate IE, had to get that out!

Oct 18: More observations:

This behavior only occurs when the table has 1 or 2 rows. I am not sure the minimum rows before the behavior stops

I have two types of click sensitive areas in each row. The First is a span that has the button ui applied to it. It uses the button ui events. The second are either images or links that have a click event associated with them.

When I mouse over the first type, the horizontal scroll bar disappears and is replaced by a white area.

When I mouse over the second type, the table collapses to just a horizontal scroll bar.

When I mouse off the bottom of the page the horizontal scroll bar disappears. When I mouse back on then the table collapses.

tandreasen

I am noticing this behavior (also in IE9) when you click on any rows, all of which have *no* click event handling. The footer height (bottom section) grows upon each click, after moving the mouse around it will actually reset itself back to normal, so it's behaving very strangely.

The min-height: 0% fix did not work for me. Did either of you come up with any other kind of solution for this?

Thanks.

allan

Can you link to a test case please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan

tandreasen

I figured out the problem: when I said that min-height *didn't* fix it, I wasn't trying hard enough: adding to my stylesheet:

[code]div.dataTables_scrollBody { min-height: 0%; }[/code]

actually fixed the issue.