Pagination styling problem with IE9 [Continued]

niki4810

Hi Allan ,

In one of my project I use twitter bootstrap to style the datatables. I recently faced an issue with pagination control scrolling downward when hovering over table rows on IE:

Please see this link for more details on the issue that was previously reported: http://www.datatables.net/forums/discussion/4510/pagination-styling-problem-with-ie9/p1

You can see the actual issue by opening this example on IE 9: http://live.datatables.net/omasod/edit#javascript,html (notice that as you hover over the table rows, the table body scrolls and pagination control jump to the bottom of the screen)

I tried different solutions mentioned in the above thread (http://www.datatables.net/forums/discussion/4510/pagination-styling-problem-with-ie9/p1) , but none of them worked. Finally, after goggling a bit, I found that there is a know scrolling issue on IE 9 if a table is inside of a Div, Here is the associated thread : https://github.com/twitter/bootstrap/issues/5074 (open the jsfiddle in this post on IE9 to see the issue)

In order to resolve this issue all I had to do is modify/add the CSS class selector for '.dataTables_scrollBody' as follows

.dataTables_scrollBody{
overflow-x: scroll !important;
}

i.e. to set 'overflow-x : scroll'. This fixed my scrolling issue on IE9. Just wanted to post the solution in this forum, so that it would be helpful to others who come across similar issue.

Hope this helps.

Thanks,

Nikhil