Incorrect table width in hidden containers

krojew

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.

allan

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

hi!

For tabs solution is

$( "#tabs" ).tabs({

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

 }

});