DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

FixedColumns not working with Bootstrap.css

FixedColumns not working with Bootstrap.css

ttbackttback Posts: 19Questions: 0Answers: 0
edited July 2012 in Bug reports
I'm not sure if I should post it here or if there's another place for FixedColumns plugin but this particular example does not work with Bootstrap 2.0's css
http://datatables.net/release-datatables/extras/FixedColumns/

It doesn't work in both Chrome and IE for me. In Chrome the Columns will go all the way the right while in IE I see no xScroll at all.

It might be something related to column width that's set by bootstrap. Have you tried it?

Replies

  • ttbackttback Posts: 19Questions: 0Answers: 0
    I also learned that I have to delete bootstrap.css and change setting for xScrollX for it to work in Chrome. Just removing Bootstrap.css doesn't seem to do the trick for Chrome but works for IE. I'm trying to figure out what might 'cause this.

    "sScrollX": "10%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true
  • ttbackttback Posts: 19Questions: 0Answers: 0
    edited July 2012
    I'm also seeing the warning (even with the example code, and sScrollX set to 100%) in Chrome:
    [quote]warning (table id = 'example'): The table cannot fit into the current element which will cause column misalignment. Increase the sScrollXInner value or remove it to allow automatic calculation
    [/quote]
    I checked following doc on FixedHeader(not FixedColumn), http://datatables.net/forums/discussion/10275/fixedheader-column-widths-dont-match-cloned-header-from-table/p1
    and tried to set a super large width on one column and see what happens, it seems like something is wrapping the table so that the columns would never get out of the width of table no matter what you set. I haven't been able to track down that css property in bootstrap.css yet.
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Any chance you could link me to an example of this integration? I haven't tried using bootstrap with FixedColumns before, but it does sound like a very useful integration.

    Also, which bootstrap integration files are you using for DataTables? The most recent are here ( https://github.com/DataTables/Plugins/tree/master/integration/bootstrap - feel free to fork!). I'll be updating the blog post to point at them soon...

    Allan
  • ttbackttback Posts: 19Questions: 0Answers: 0
    There is no versioning on it, but I used the one from your example here:
    http://datatables.net/blog/Twitter_Bootstrap_2
    I'll try the new css and js on your bootstrap and see what happens.
    There is not much custom code on my tryout, basically the exact same code you have on examples for FixedColumn, an ajax load through a text file you had on your ajax call example etc. The only diff is probably at bootstrap integration somewhere, I'll try it now.
  • ttbackttback Posts: 19Questions: 0Answers: 0
    edited July 2012
    It still as broken as before with following constructor:
    [code]var oTable=$('#example').dataTable( {
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
    "sLengthMenu": "_MENU_ records per page"
    },

    "sAjaxSource": 'datatables/ajax/arrays.txt',


    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true

    } );
    new FixedColumns( oTable);[/code]
  • ttbackttback Posts: 19Questions: 0Answers: 0
    Hey Allan, I just took out most of my local code and it still doesn't work with following code:
    [code]
    <!DOCTYPE html>












    $(document).ready(function(){
    //Initalize data grid
    var oTable=$('#example').dataTable( {
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
    "sLengthMenu": "_MENU_ records per page"
    },

    "sAjaxSource": 'datatables/ajax/arrays.txt',


    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true

    } );
    new FixedColumns( oTable);
    });








    Column1
    Column2
    Column3
    Column4







    [/code]
  • ttbackttback Posts: 19Questions: 0Answers: 0
    edited July 2012
    The bootstrap integration is definitely necessary because it actually became a major selling point for us to use Datatables, our customers really liked the integrated UI a lot more than what we had from other vendors and it opens many doors for future developments based around Bootstrap Themes. It's a very good strategic move on your part 'cause so far other div-based grid solutions, jqgrid, sencha, and slickgrid have no such easy solutions yet.
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Hi,

    Apologies for the briefness of this reply, but I need to fly out the door very shortly!

    So there are two things going on here, 1 not related to Bootstrap, while the other is.

    1. The main one that is breaking FixedColumns is the fact that you are loading data through Ajax. This isn't a problem as such, with current versions of FixedColumns you do need to use fnInitComplete to get that to work.

    I've just committed a change to FixedColumns 2.5.0.dev which you can pickup from the downloads page ( http://datatables.net/download ) that removes that required (FixedColumns will deal with it automatically for you).

    2. The bootstrap integration for DataTables wasn't really up to scratch for when scrolling was enabled in DataTables, nor when FixedColumns were used. I've just added support for both of them to the Bootstrap integration files in the GitHub repo I linked to before - so you'll want to pick up the latest files from there.

    This is an example of it in action:
    http://live.datatables.net/ovesuy/edit#javascript,html

    Regards,
    Allan
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    And with FixedColumns 2.5.0.dev (the main difference is that the whole table looks scrollable): http://live.datatables.net/ovesuy/2/edit

    Allan
  • ttbackttback Posts: 19Questions: 0Answers: 0
    Allan,

    Great work. Thanks for such fast support response. I have to wrap up my spike on Monday so this is great help. Advanced filtering and Column freeze are two features on top of the list for this release so it's really important to have this one working.

    I couldn't imagine myself figuring out the first one since without Bootstrap it worked somehow. Did you have to use the Datatables debugger to find out?

    I'll check out your new dev versions and get things together.
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    edited July 2012
    > I couldn't imagine myself figuring out the first one since without Bootstrap it worked somehow. Did you have to use the Datatables debugger to find out?

    No, it was an issue I already knew about - see:
    http://datatables.net/release-datatables/extras/FixedColumns/server-side-processing.html

    I'm not sure why I never thought of mitigating that issue in FixedColumns, rather than requiring the developer to use fnInitComplete, until I was thinking about your post - but I guess that's the way software development goes sometimes. Hooray for open source and people such as yourself contributing back to the project - thanks!

    Allan
  • ttbackttback Posts: 19Questions: 0Answers: 0
    Not a problem, Allan, I don't know enough about js plugin development and datatables to make any real contributions yet, but hopefully I can help debugging some of these features.

    I saw your changes on datatables.bootstrap.css and the fixed column build, so I'm using them below in my new code.

    I tried to pull them together, and it seems to trigger your changes (the scroll bar on the entire table) but it's definitely not fixing the columns (only one scrollbar rendered). If i scroll it to the right, the columns not fixed(on the right) will just slide into the fixed one from behind. It appears like they are overlapped on the screen.

    Can you try to replicate it on your end?

    [code]

    <!DOCTYPE html>














    $(document).ready(function(){
    //Initalize data grid
    var oTable=$('#example').dataTable( {
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
    "sLengthMenu": "_MENU_ records per page"
    },

    "sAjaxSource": 'datatables/ajax/arrays.txt',


    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": true

    } );
    new FixedColumns( oTable);
    });








    Col1
    Col2
    Col3
    Col4








    [/code]
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Here is a working example from your code: http://live.datatables.net/esoher/edit#javascript,html

    I changed the 'raw' github includes to reading it from the pages - GitHub 'raw' shouldn't be used as a CDN as it is really not optimal for that.

    Allan
  • ttbackttback Posts: 19Questions: 0Answers: 0
    Oh, I'm using raw only for this quick check. Was the raw links the cause of the problem?
    The demo seems to only in Chrome now. But even in Chrome, some column separators just don't match. IE and Firefox don't show scrollbar and if you change width of window, it will end up in a mess.
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    > Was the raw links the cause of the problem?

    Oddly enough, I think it might have been - but I am surprised. I'm not 100% sure what the problem was, but I changed them and it worked - so we'll go with that.

    Could you try the bootstrap integration with the release version of FixedColumns and see if that works better for you? The 2.5.0 nightly is stillv try alpha quality - with a few resizing issues unfortunately.

    Allan
  • ttbackttback Posts: 19Questions: 0Answers: 0
    Allan, I will try again once I get a breather for other issues at the minute.
  • jasonpunyonjasonpunyon Posts: 4Questions: 0Answers: 0
    edited July 2012
    Hi Allan,

    Can you think of a reason why the horizontal scrolling wouldn't work in Firefox? I'm looking at
    http://live.datatables.net/ovesuy/edit#javascript,html and
    http://live.datatables.net/esoher/edit#preview

    in Firefox 13.01 and 14.01 on a Mac, Firefox 12.0 and 14.01 and IE9 on a PC neither of those examples scroll left and right like they do in Chrome. All of the columns look as if they were rendered to fit in the table.

    Thanks,
    Jason
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Hmmm - interesting. Nothing to do with FixedColumns, but you are quite right that the table isn't enforcing the scrolling like it should when sScrollXInner is set. I'll need to investigate that one in more details - bookmarked to come back to.

    Thanks for pointing this out.

    Allan
  • jasonpunyonjasonpunyon Posts: 4Questions: 0Answers: 0
    No problem, sir. And thanks for taking a look.

    Jason
  • jasonpunyonjasonpunyon Posts: 4Questions: 0Answers: 0
    edited July 2012
    Hi Allan,

    Pull request at https://github.com/DataTables/Plugins/pull/3

    One line fixes are my favorite :)

    Thanks,
    Jason
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Fantastic!

    It looks like it was this in Bootstrap that was causing the problem:

    [code]
    table {
    max-width: 100%;
    [/code]

    Thanks very much for finding that and the pull request. Merged in now and the 'live' examples above work in Firefox :-)

    Regards,
    Allan
  • jasonpunyonjasonpunyon Posts: 4Questions: 0Answers: 0
    No prob.

    Jason
  • taelortaelor Posts: 20Questions: 0Answers: 0
    edited August 2012
    hey allan, I think I've found another slight issue with bootstrap and fixed colums, but this pertains to setting the iLeftWidth (and right). I think it might have something to do with the cloning and the actual table column behind it. It's weird, its like there is two columns on top of each other. I don't know if you are just supposed to be overriding one, or deleting one.

    http://live.datatables.net/umuwij/2/edit#javascript,html

    Also something I added to my bootstrap integration css file. (warning SASS below)

    [code]
    div
    &.DTFC_LeftHeadWrapper table, &.DTFC_RightHeadWrapper table
    margin-bottom: 0 !important
    border-top-right-radius: 0 !important
    border-bottom-left-radius: 0 !important
    border-bottom-right-radius: 0 !important
    thead tr:last-child
    th:first-child, td:first-child
    border-bottom-left-radius: 0 !important
    border-bottom-right-radius: 0 !important
    &.DTFC_LeftBodyWrapper, &.DTFC_RightBodyWrapper
    table
    border-top: none
    margin-bottom: 0 !important
    tbody tr:first-child
    th, td
    border-top: none
    &.DTFC_LeftFootWrapper table, &.DTFC_RightFootWrapper table
    border-top: none
    [/code]

    Pretty much just needed to add in the Right side overrides for fixed columns as well.
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Heh - good timing - I've just been investigating this issue. Basically iLeftWidth is not going to be supported in FixedColumns 2.5+ because of the way it now works. If you want to set the width of the columns, then you should do so on the master table using the sWidth column option - FixedColumns will honour that.

    Allan
  • akhrolakhrol Posts: 1Questions: 0Answers: 0
    iRightColumns: (any value) don't work too.
  • daludalu Posts: 1Questions: 0Answers: 0
    Debug code: edahat
    weird that it shows 0 tables in the debugger
    anyhow I wanted to get the fixed 1st column working with a bootstrap table
    [code]




    $(document).ready(function()
    {
    $('.dropdown-toggle').dropdown();
    $(".alert").alert();
    var oTable = $('#vergleich').dataTable( {
    "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
    "sScrollX": "100%",
    "sScrollXInner": "150%",
    "bScrollCollapse": false,
    "bFilter": false,
    "bInfo": false,
    "bPaginate": false,
    "bLengthChange": false,
    } );
    new FixedColumns( oTable );
    })

    [/code]
    the table is wrapped in
    [code]


    [/code]
    The table is a standard table
    [code]


    ...


    ...


    cloned thead

    [/code]
    please advise
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Please link to a test case: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
  • ganchunhowganchunhow Posts: 1Questions: 0Answers: 0
    I noticed there is column offset issue when I initiate FixedColumns with
    [code]
    new FixedColumns( oTable, {
    "iLeftColumns": 0,
    "iRightColumns": 1
    } );
    [/code]

    Digging a little further I found that DT_bootstrap.css are missing styling for div.DTFC_RightHeadWrapper, adding that in the css solves it.

    [code]
    /*
    * FixedColumns styles
    */
    div.DTFC_LeftHeadWrapper table,
    div.DTFC_LeftFootWrapper table,
    div.DTFC_RightHeadWrapper table,
    div.DTFC_RightFootWrapper table,
    table.DTFC_Cloned tr.even {
    background-color: white;
    }

    div.DTFC_RightHeadWrapper table ,
    div.DTFC_LeftHeadWrapper table {
    margin-bottom: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }

    div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
    div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
    div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
    div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }

    div.DTFC_RightBodyWrapper table,
    div.DTFC_LeftBodyWrapper table {
    border-top: none;
    margin-bottom: 0 !important;
    }

    div.DTFC_RightBodyWrapper tbody tr:first-child th,
    div.DTFC_RightBodyWrapper tbody tr:first-child td,
    div.DTFC_LeftBodyWrapper tbody tr:first-child th,
    div.DTFC_LeftBodyWrapper tbody tr:first-child td {
    border-top: none;
    }

    div.DTFC_RightFootWrapper table,
    div.DTFC_LeftFootWrapper table {
    border-top: none;
    }

    [/code]
  • allanallan Posts: 63,685Questions: 1Answers: 10,498 Site admin
    Thank you! Committed here: https://github.com/DataTables/Plugins/commit/abf37a5

    Allan
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.