Bootstrap 3 + horizontal scrolling

Jonnatan

Hi everyone

I want to integrate Bootstrap 3 with DT, but number of column is large and dynamic in almost cases. I set "sScrollX": "auto" which creates a issue in header (misaligned). Someone was trying to make the same?, please give me any clue, would be appreciated.

Use Case: http://live.datatables.net/usuvos/3


Thanks
Jonnatan

bobs619

Have the same issue. I guess my new project will have to use bs 2.3.2 until this resolved.

piepet

I also have exactly the same issue.

Pramod27

I got the same alignment issue, Its because of demo_table.css and demo_page.css is not updated with bootstrap 3.0.

Find the below link to get updated CSS and replace it with demo_page.css

Link - https://gist.github.com/jonsxaero/6177314

Pramod27

Also add inline style="margin-top:0px" in table where you have added dataTable ID

allan

Sorry I missed this post originally.

Bookmarked to look at when I can make a little bit of time to do so as this is obviously quite important for BS3 integration.

Allan

chavdamalde

@Pramod27 thanks it's works only chrome browser not in mozilla firefox for me.

bobs619

allan,
we look forward to the solution

allan

It should work just fine with the updated Bootstrap 3 integration files provided here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

Allan

chavdamalde

@Allan,

Thank's for post, you are great, this work fine.

chavdamalde

@Allan,

The Table headings are rendered as a table separate from the data in the grid. This is causing some small but noticeable misalignment with the columns in the Table body.

allan

They have to be separated in that way if scrolling is enabled. There is no other cross browser way to do a scrolling tbody reliably. If you are seeing misalignment between the two, please link to a test case so I can see what is going wrong and fix it.

Allan

chavdamalde

@Allan,

Thanks Allan for quik replay,

here is test link http://jsfiddle.net/chavdamalde/46jwU/10/

Thanks!

bobs619

@Allan,
I fixed this using the BS3 master code and used TDs instead of THs in the THEAD. Something about using THs throws the alignment really off.