Tables in tabbed page
Tables in tabbed page
gillo
Posts: 2Questions: 1Answers: 0
Hi all,
I have a page with two tabs, each one of them with a DataTable inside it.
I have a strange behaviour: when the page is loaded, the table on first tab is correctly shown. When I click on second tab and the view switches, the table on it is a mess, meaning its content columns are not in line with respective headers, but they are displaced towards right.
Even stranger thing: if I press F12 (Firefox browser on Ubuntu) the table fixes itself while opening Developer Tool. BUT, at that point, if I switch back to first tab, I will find it scrambled (this time with content columns displaced towards left).
Every time I press F12 (either opening or closing Developer Tool, it doesn't matter) the table that's currently shown fixes itself, and the hidden one gets scrambled. If I switch between tabs without hitting F12, it's always the same table being correct and the other one scrambled.
Any tips about cause and/or solution to this behaviour?
I already tried catching 'draw' event, but it looks like it's not fired in this situation.
This question has an accepted answers - jump to answer
Answers
You need to call
columns.adjust()when the hidden table is made visible. See this example for how to do it with Bootstrap. You might be using something else, but without a test case I can't be sure.Allan
@allan Thank you very much. Can't test it right now but I'm quite sure that's exactly what I need