scrollY with height bigger than actual table height, with scrollCollapse causes unwanted scrollbars
scrollY with height bigger than actual table height, with scrollCollapse causes unwanted scrollbars
I've been hammering on this problem for the past few days but can't find any solution...
I have a website were dataTables is used on a search results page, so it must be able to handle a few records, or many.
I wanted to use vertical scrolling to make sure the headers stay visible no matter how many records are found, but this is giving me a headache...
First of all, I think this is a bug, I managed to solve it for me but you might want to fix this.
I am also using horizontal scrolling on the same table, and this results in the table always getting a horizontal scroll bar, even when making the window bigger, when I expect it shouldn't be doing this, take a look at this example:
http://jsfiddle.net/kzgq1L25/3/.
As you can see there is a horizontal scrollbar, which seems to be created because of the space the vertical scrollbar is taking up, but even when you resize the window, the horizontal scrollbar will keep appearing.
I managed to fix this by adding this css to my table:
table.dataTable
{
width: 100% !important;
}
Which results in this example which at least solves the horizontal scrollbar: http://jsfiddle.net/kzgq1L25/2/
Now my main problem, is as you can see, there is always a vertical scrollbar being added, even when the table height is less than the given height in the scrollY
parameter. This is only happens when also using "scrollCollapse": true
. In the last example the table consists just of 2 rows, and according to Chrome developer tools, the tbody element is just 62px big, and I've given the "scrollY": "500px"
parameter to dataTables, so I would expect to NOT have a vertical scrollbar.
Any ideas on how to fix this?
Answers
No ideas anyone??
I've also posted this on stackoverflow just now:
http://stackoverflow.com/questions/28342259/datatables-verical-scroll-issue