DataTables and Bootstrap 3 displays gap between header and scroll table and scrollbar
DataTables and Bootstrap 3 displays gap between header and scroll table and scrollbar
bhenry001
Posts: 7Questions: 0Answers: 0
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
http://jsfiddle.net/bhenry001/RXq7y/
Any ideas?
Thank you,
Bruce
This discussion has been closed.
Replies
Let me know how you get on with it!
Allan
Allan
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
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
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.
.row {
margin-left: 0 !important;
margin-right: 0 !important;
}
.table th, .table td {
text-align: center !important;
}
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