Datatables ScrollY formatting inside Bootstrap panel

Gfloridafan931

Hello,

I'm trying to add a datatable inside a bootstrap panel, which has a 6 col width unless a small screen size is used. With ScrollY enabled, I notice the column headers aren't aligned unless the row set is larger than the px value defined in ScrollY. Is there any way I can align the column headers without having a large set of data?

Here is a JSFiddle:
https://jsfiddle.net/k9rn3qaa/19/

Any help would be greatly appreciated

kthorngren

I loaded your code locally and it works fine. I noticed the difference is the DT version. You are using 1.10.1 and I'm using 1.10.13. So, I loaded 1.10.1 and see the issue on my local system. Sounds like you need to update the DT version.

Kevin

Gfloridafan931

Thanks for the response. I just updated to 1.10.13. Now I'm seeing the horizontal scroll bar, even though it really shouldn't be there. Do you see that as well?

kthorngren

Yes I do. I took out the <div class="row"> and corresponding </div> and the horizontal scroll bar at the bottom is gone.

Kevin

Gfloridafan931

That didn't seem to work. I'm still seeing the scroll bar even though it shouldn't be there.

kthorngren

I made a new fiddle of yours and updated the jquery.dataTables.min.js to use 1.10.13 and removed the two lines above. The scroll bar at the bottom is removed.

https://jsfiddle.net/sqzm7kvk/

You may have something else in your code causing the scroll bar to appear.

Kevin

Gfloridafan931

Thanks for the reply. What browser are you using? I'm still seeing the horizontal scroll bar in your example in both IE and Firefox. It looks good in Chrome though.

kthorngren

I'm using Chrome.

kthorngren

Works in Safari. If I make the table width 99% in Firefox the scroll bar is gone but the header line is offset, not what you want. But I did notice that the right border on the header line does appear but is not displayed when at 100%.

Not sure where the problem is.

Kevin

kthorngren

I tried with dataTables.bootstrap.min.css instead of jquery.dataTables.min.css and the scrollbar is not displayed with Firefox. It seems the sorting images used with jquery.dataTables.min.css push the right border just off the panel causing the scrollbar to be displayed.

Made the change to the fiddle:
https://jsfiddle.net/sqzm7kvk/

Kevin