Table gets WIDTH:0px when "bVisible":false is used

diondu

I noticed that when I use "bVisible":false in some colunms the table auto-width does'n work.

I checked the innerHTML of the table parentNode and noticed that when I use bVisible:false in "aoColumns" definition DOM changes the style attribute of the table adding a WIDTH:0px;.

When bVisible is not used in "aoColumns" colunm definition this "WIDTH:0px;" doen't appear in the style attribute of the table and so AutoWidth works.

diondu

I'm using IE6.

diondu

Alan, can you check this please.

Thanks,

Fernando

allan

Are you initialising the table when it is hidden? Are you able to link us to an example showing this issue please?

Thanks,
Allan

mwhitesri

I am seeing this behavior too. When there is a bVisible set to false with Firefox a element style of width: 100px; is added to the tag, with IE8, it is width: 0px; If I remove bVisible or set it to true, the tag does not get the element width style added and the table is shown full width.

I can work around it for the moment by changing the class used by the datatable to be width: 100% !important; but I am curious what is making this happen.

Using v1.7.5 (and really like what it can do)

Thanks,
Mark

robertbrower

I have the exact same problem. I have not found a workaround. Seems to happen with AJAX and not static content. But I diffed the ajax content and it is 100% the same from call to call. I am stumped.

robertbrower

I think what we need is a good example for using datatable in a jquery ui dialog where when the dialog is opened it gets the table rows using ajax. This is my scenario.

thecountofzero

Allan,

I am having the exact same issue.

I am using FF 3.6.15

Whenever I have a column that has its bVisible field set to true, the table is getting the following added to its HTML:

style="width: 100px;"

I have found the offending line of code, but have not had enough time to figure out why this is happening when a column has its bVisible field set to true.

The offending line of code is the second to last line of code in the function named "_fnCalculateColumnWidths"

The line reads:

[code]oSettings.nTable.style.width = _fnStringToCss( $(nCalcTmp).outerWidth() );[/code]

In the meantime, I have fixed this by commenting out this line of code, but by doing so, I do not know what side effects this might cause.


Thanks,
Mike

greenflash

I had this problem too. In my case it was caused by initialising the table when it was hidden. Making the table visible solved the problem, but it would be nice to be able to keep it hidden.

allan

You should be able to call http://datatables.net/api#fnAdjustColumnSizing when the table is made visible and have everything resized correctly (example: http://datatables.net/examples/api/tabs_and_scrolling.html ).

Allan

greenflash

Many thanks for the quick reply. That solves the problem.

robertbrower

Hello Allan. Do you think you can fix this issue? I want to avoid having different customized versions of your plugin if I can help it. It is very unpractical at this customer site. Btw, how can I donate to this cause without going through paypal? Where are you located?

allan

@robertbrower: Are you calling fnAdjustColumnSizing when the table is made visible? I assume that you are having the issue discussed in this thread because you are initialising the table when it is hidden? Basically the table must be visible in order for the browser to calculate the sizes needed - browsers don't bother calculating sizing for elements that aren't displayed since they don't have a size!).

> Btw, how can I donate to this cause without going through paypal? Where are you located?

There is now a Google Checkout option which might suit you better: http://datatables.net/donate - and I'm UK based :-)

Regards,
Allan

mydoghasworms

I am having this problem too. I thought upgrading to 1.8.1 would solve it, but it didn't. I get this problem with a table that is initialized while it is visible. I have the same problem as described by mwhitesri above. For some unknown (or is it known?) reason, the table get a set width applied when trying to make any of the columns invisible, whereas this does not happen when you leave the columns alone. I have not tested the AJAX data theory proposed by robertbrower, but I am loading my data via AJAX as well.
I guess one workaround (very ugly!) would be to remove the CSS width attribute after each server data retrieval.

mydoghasworms

OK, so what I did was to remove the width css attribute directly after initializing the table, and then the table remained fine, as it was supposed to be.
[code].css('width','');[/code]
I even have three tables in tabs, and using this technique, the problem was resolved for each of them.
So I am thinking that thecountofzero above must be on to something.

findesikke

@mydoghasworms: Thank you. That solved it perfectly :-)

Omnimike

I ran into this problem when using bVisible too. Both the workarounds suggested by mwhitesri and mydoghasworms worked for me.

sevi_csl

@ Mydoghasworms: THANKS SO MUCH!!!! You save my ass!!

Ariazlol

Hi all

In my case i have a column that i hide conditionally, and when the bVisible was set to false, the width of all my columns was set to 0px.

I solved the problem by adding

[code]"bAutoWidth": false[/code]

dthunsterblich

Hey hey,

I have had the same problem. I updated some data in the table and the table wasn't displayed the way I initialized it (It was too long). At first I tried 'mydoghasworms'- suggestion but It didn't have the correct result for me.

I was better off using 'Ariazlol's suggestion:
[code]"bAutoWidth": false [/code]

Thanks for that!