Replies

• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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.
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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.
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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.
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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!
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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?
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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.
• allan Posts: 63,414Questions: 1Answers: 10,454 Site admin

  January 2011

  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
• krojew Posts: 30Questions: 0Answers: 0

  January 2011

  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.
• krojew Posts: 30Questions: 0Answers: 0

  April 2011

  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.
• asma Posts: 2Questions: 0Answers: 0

  May 2012 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
• sourabgupta01 Posts: 2Questions: 0Answers: 0

  May 2014

  hi!

  For tabs solution is

  $( "#tabs" ).tabs({

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

  });