DataTables and Bootstrap 3 displays gap between header and scroll table and scrollbar

bhenry001

Why does Firefox have a horizontal scrollbar and Chrome doesn't? Chrome seems to display much better too. I would like to get rid of the horizontal scroll bar in Firefox. Here is the link:

http://jsfiddle.net/bhenry001/RXq7y/

Any ideas?
Thank you,
Bruce

allan

This should be fixed with the latest integration files here: https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3

Let me know how you get on with it!

Allan

bhenry001

Thank you! I copy pasted the bootstrap 3 css and the Javascript. It doesn't seem to make a difference.

allan

Can you link me to a page showing the issue please? I thought I'd fixed it with this commit: https://github.com/DataTables/Plugins/commit/1f9595d

Allan

bhenry001

When i turn off the following css in firebug, the horizontal scroll bar disappears.

table.dataTable, table.dataTable td, table.dataTable th {
-moz-box-sizing: content-box;
}


If have not used jsfiddle before. So hopefully I have not used the wrong code or something. Is there a way to use the github.com/DataTables to load the proper Datatables css and Javascript? Here is the results page and if used in Firefox shows the horizontal scrollbar.

http://jsfiddle.net/bhenry001/RXq7y/embedded/result/

I copied what I thought belonged. Just not sure what I am doing wrong.

Thanks for you help,
Bruce

allan

If you remove `context-box` then there is avery good change of the header and body column misaligning, particularly at smaller table widths.

However, it looks like Firefox doesn't like the box model being set for the table. If you use:

[code]

table.dataTable td,
table.dataTable th {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
[/code]

then the horizontal scroll will disappear (i.e. remove the `table.dataTable` selector from that code block in the CSS).

I'll investigate some more and commit the change to the plug-ins repo is needed.

Allan

bhenry001

Thank you. Everything works great using bootstrap 2.x. I moved to bootstrap 3.x because there was an annoying bug with the modals in version 2.x where the first time the modal appeared and you clicked to enter data, it would loose focus every time. This was fixed in bootstrap 3.x, but now having issues with the alignment in Firefox. Maybe I will just use Chrome and say the application can only be used with Chrome. Thank you again. BTW- Do you ever take a break? Wow!

bhenry001

Allen,
I started over from beginning and so far it is looking a lot better in firefox. I will post again if I need any further assistance.

bhenry001

All looks great now. I updated the code at http://jsfiddle.net/bhenry001/RXq7y/ . What was missing was the original jquery.dataTables.css resource. Plus I added the following mod for bootstrap. For some reason it uses a -15px for the .row margin. It does not cause difficulty with the column alignment, but makes the header and footer larger. Did not want this effect. Thanks for all your help, this is truly the best client side tables available.

.row {
margin-left: 0 !important;
margin-right: 0 !important;
}

.table th, .table td {
text-align: center !important;
}

allan

> What was missing was the original jquery.dataTables.css resource

That's interesting. With the Bootstrap 3 integration files for DataTables that shouldn't actually be needed.

However, its good to hear that you have got it working now :-)

Allan