table width=0px after load ajax in many tab
table width=0px after load ajax in many tab
lazzy
Posts: 21Questions: 8Answers: 0
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?
This question has accepted answers - jump to:
This discussion has been closed.
Answers
You need to call
columns.adjust()when the table is made visible. See this example.Allan
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
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 whywidth:0is applied.Allan
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
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