table width=0px after load ajax in many tab

lazzy

I use bootstrap in my app i have 6 tabs and datatables inside
Table in tab active works fine but i have another table in inactive tabs have style='width: 0px;'
how can i fix it?

allan

You need to call columns.adjust() when the table is made visible. See this example.

Allan

lazzy

is there another way push some variable in setting?
or modify something in by js? it works fine if i don't use ajax l load 7 tabs (100 lines foreach tab total i have 700 lines) but i have problem of time 15s
when i use ajax look like this
$('#table1').DataTable( {
ajax: '../ajax/data1/arrays.txt',
} );
$('#table2').DataTable( {
ajax: '../ajax/data2/arrays.txt',
} );
i got 2s to load page it continue load data tab 1 ->3 shows fine datatables but when i click on tab 4->7 all table style=width:0px
so i think it comes from js and we can fix it

allan

It does come from JS, and as I say, the way to fix it is to call columns.adjust() when the table is made visible. When it is hidden it doesn't have any height or width, which is why width:0 is applied.

Allan

lazzy

it's weird but It displays well in 50% of cases. Can you tell me file js create this issue. maybe i can fixed it. i think invisible table can be style = "width : 100%" instead of 0px

allan

Without being able to see that page, I can't say what file it would need to be applied in.

However, as I say, you need to call columns.adjust() when the table is made visible. There is no way around that I'm afraid.

Allan