Tables in tabbed page

Tables in tabbed page

gillogillo 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

  • allanallan Posts: 63,439Questions: 1Answers: 10,459 Site admin
    Answer ✓

    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

  • gillogillo Posts: 2Questions: 1Answers: 0

    @allan Thank you very much. Can't test it right now but I'm quite sure that's exactly what I need

Sign In or Register to comment.