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

bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
edited January 2014 in DataTables 1.9
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

Replies

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
    Thank you! I copy pasted the bootstrap 3 css and the Javascript. It doesn't seem to make a difference.
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
    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
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    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
  • bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
    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!
  • bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
    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.
  • bhenry001bhenry001 Posts: 7Questions: 0Answers: 0
    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;
    }
  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    > 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
This discussion has been closed.