Hidden columns shrink table body
Hidden columns shrink table body
bigdaddyv
Posts: 29Questions: 0Answers: 0
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
[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
This discussion has been closed.
Replies
[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
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
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
I don't know if that helps you isolate it or not, but thought I should pass the info on.
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.
[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?
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
Allan