Hidden columns shrink table body

bigdaddyv

I have six columns in my table. Two of those columns are set to hidden as with this bit of code...

[code]
oTable = $("#the_table").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "bVisible": true },
{ "bVisible": false },
{ "bVisible": true },
{ "bVisible": false},
{ "bVisible": true },
{ "bVisible": true }
]
});
[/code]

Whenever I use the bVisible with a setting of false, the rows in the body of the table shorten and are no longer the width of the header and footer of the table. It makes it look very odd. When A) I simply don't include those two columns when I build the table or B) I set all columns to {"bVisibile":true} the problem isn't there.

Any thoughts?

Thanks so much,
Vern

bigdaddyv

I have also tried using...

[code]
oTable.fnSetColumnVis( 1, false );
oTable.fnSetColumnVis( 3, false );
[/code]

after creating the table with all columns visible. The same thing happens.

I have also used the fnAdjustColumnSize() function with no joy there either.

Thanks so much,
V

allan

Could you possibly link us to an example please? Also which browser are you using?

Allan

bigdaddyv

I have put a jpg of it online so you can see what I am talking about.

http://www.vernsix.com/table-shrink.jpg

I am using FireFox. It appears to NOT happen in IE. I have only tested with these two at this point.

allan

It's difficult to say from the screenshot - but to you have table { width: 100% } or something like that?

Allan

bigdaddyv

Hi Allan,

Adding the width=100% to the tag doesn't seem to make any difference whatsoever. I'm not sure how best to help you help me with regards to that screen shot. It shows it pretty clearly... the blue title and footer are wider than the light blue and section of the table. When the columns are NOT hidden the widths are equal.

Where can I start looking?

Thanks for any help you can lend.

Blessings,
V

bigdaddyv

Okay... I've just tested it a bit further. The problem shows up in FireFox and Chrome and on the iPhone and iPad browsers. The only one it doesn't show up on in my testing is IE.

I don't know if that helps you isolate it or not, but thought I should pass the info on.

bigdaddyv

When I started FireBug to see if I could make sense of the issue here I noticed something odd... firebug puts a scoll bar in the top section of the window since all the firebug stuff is at the bottom of the screen. With the scroll bar in place the table sizes correctly horizontally. That is to say, the and are the same width as your header and footer.

When I un-maximize the browser window and resize it to be bigger than the single monitor (ie: stretch it across my two monitors) the shrinkage gets worse and worse the longer I stretch it.

Looking at the code in Firebug says that the table width was set (not by me) to 1693px. It stays that size no matter what I do to the browser window.

bigdaddyv

After much digging, I think I found a work-around. It seems the use of hidden fields or even fnUpdate() causes the following bit of code to be added to the table...

[code]
style="width:1693px"
[/code]

This bit of code does not appear in my hand written code whatsoever, but gets added by DataTables unless I use the bAutoWidth flag in which case the problem stays away.

I'm curious what other functionality I will lose by adding this though?

allan

DataTables isn't quite up to par with dynamic resizing at the moment - you'd need to call fnAdjustColumnSizing and possibly some other stuff (I've not done it recently so can't quite remember) when resizing. This is most certainly something that needs looked at in future.

Disabling the auto width will mean that DataTables won't fix the widths of the columns automatically - so when you change pages the column widths might change since the browser is displaying different data. Setting the width manually or living with it might be perfectly acceptable for your project tho :-).

Allan

bigdaddyv

But I'm not doing any resizing really. I am just wanting the datatable to not be different on those tables that have hidden columns. Looking at the code it appears the only thing that changes is the specific style:width attribute being adding by datatables.

allan

You could possibly try adding an fnDrawCallback method to your DataTables initialisation and set the table width to 100% there ( oSettings.nTable.style.width = "100%"; ). Not perfect, but possibly an interim solution.

Allan