Incorrect table width in hidden containers

Incorrect table width in hidden containers

krojewkrojew Posts: 30Questions: 0Answers: 0
edited January 2011 in Bug reports
Hi,
When a table with hidden columns is constructed in a hidden container, it's width is computed incorreclty. You can see it by inserting a table in a initially hidden jQuery UI tab: http://img513.imageshack.us/img513/2822/plasmadesktopxq1890.png
Using fnAdjustColumnSizing() doesn't solve the problem.

Replies

  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    Hi krojew,

    Two things spring to mind - firstly are you calling fnAdjustColumnSizing whenthe table is made visible, and do you have a CSS declaration something like table { width: 100% }?

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    Hi,
    I'm calling fnAdjustColumnSizing() every time a tab is selected and the table becomes visible. I also have width: 100% in my CSS for the table. I've noticed the same thing happens when opening a jQuery UI dialog with a table with hidden columns.
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    One other option to try and make sure - can you add style="width: 100%" to the table tag please? Failing that can you give us a link to a page showing the problem?

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    I added style="width: 100%" to the table and the effect is the same. What's strange is that firebug shows 100% changed to 100px.
    I've copied a fragment of my website with the table: http://kl-software.com/tabletest.php - you can see the problem after switching the tab.
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    I don't actually see where you are calling fnAdjustColumnSizing however, if you do this:

    [code]
    $('#new-table').css('width', '100%').dataTable().fnAdjustColumnSizing();
    [/code]
    it should do the trick for now. I'll have a look into why this is happening - but that work around will hopefully do what you need :-)

    Regards,
    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    I updated the test page so it now calls css('width', '100%') and fnAdjustColumnSizing() on every tab change. Unfortunately with no effect - the problem still exists.
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    It needs to be set after the table is made visible - otherwise it still has nothing to go on:

    [code]
    $('#tabs').tabs({
    selected: 0,
    select: function() {
    alert('setting css');

    setTimeout( function () {
    $('#new-table').css('width', '100%');
    newTable.fnAdjustColumnSizing();
    }, 10 );
    }
    });
    [/code]
    Unless the tabs script has an callback for when the tab is made visible, which would be better.

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    That did the trick even without the need to call fnAdjustColumnSizing() (or should it be called anyway?). It's a good workaround but there is definitely something wrong going on there. Looking forward to a fix. Thanks!
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    Best to call it if you have scrolling enabled. If you don't then there is no need.

    Good to hear that does the job!

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    I also found that it's needed when a table is in a resizable container on every resize. You can see it on the test page. When the dialog is large, the table scales nicely, but when the dialog is too small, the table just keeps the minimum size. Can a table be able to scale down infinitely or can a minimum allowed size be retrieved somehow?
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    You could do something like table { min-width: 400px }, which DataTables should then respect. That will keep it to a minimum size. Failing that, just set a min-width on the container element, at bit like what is done with the min-height in some of the demos.

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    Unfortunately I have to reopen the issue. After commit https://github.com/DataTables/DataTables/commit/537e3e9595b4b641f333c43d2d8d575217b1d234 setting css via jQuery on showing the table stopped working.
  • allanallan Posts: 54,897Questions: 1Answers: 8,605 Site admin
    It seems to work okay for me. Doing $('#example').css('width', '110%'); results in a slightly oversized table as expected. I'm not sure why reading the outer width rather than the inner width would break the ability to set the size. Do you have a min-width? I suppose it could be related to that. Unfortunately your demo page is now 404 - any chance of an example?

    Allan
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    The test page is here: http://kl-software.com/tabletest175.php but I can't seem to reproduce it there. I will investigate this issue some more. You can check out the TableTools 2 SWF exception bug I mentioned in the forums there.
  • krojewkrojew Posts: 30Questions: 0Answers: 0
    Hi,
    I found an easy way to reproduce this bug:

    1. Make your browser window small.
    2. Open a page containing a table with initially hidden columns. I don't know if it's important, but I've tested the table inside initally visible jQuery UI tab.
    3. Maximize browser window.

    Result - the table keeps previous width. This does not happen without hidden columns. Setting css('width', '100%') on every $(window).resize() event helps.
  • asmaasma Posts: 2Questions: 0Answers: 0
    edited May 2012
    hi,
    I have a similar problem with ie 8: i have tabs with details rows in all tabs ,
    a error apear after a click in details and navigation in tabs .
    if i comment $(table).dataTable().fnAdjustColumnSizing(); the problem will be resolved but the table column will not have correct width for all tabs.
    Sorry about my bad english
  • sourabgupta01sourabgupta01 Posts: 2Questions: 0Answers: 0

    hi!

    For tabs solution is

    $( "#tabs" ).tabs({

      "show": function(event, ui) {
                  var table = $.fn.dataTable.fnTables(true);
                  if ( table.length > 0 ) {
                       $(table).dataTable().fnAdjustColumnSizing();
                     }
    
     }
    

    });

This discussion has been closed.