Table width not correctly rendered on non-active Bootstrap tabs
Table width not correctly rendered on non-active Bootstrap tabs
csoseman
Posts: 2Questions: 0Answers: 0
When navigating to a tab that is not the active tab when the page is loaded, the datatable width is significantly smaller than normal. This issue disappears when the ScrollX is removed from the DT options. I would remove ScrollX option but tables usually require it due to the number of columns and data in the table. Please see https://jsfiddle.net/cjsoseman/oxLsrbz7/ for an example. Thanks for any light you can shed on this issue be it my own ignorance or a DT issue.
This discussion has been closed.
Replies
You need to use
columns.adjust()when the column is made visible. See this example with jQuery UI tabs.Allan
Allan,
Thanks for the quick response. Although this takes care of the issue of misaligned header columns, this still doesn't seem to take care of the issue of not having the width at 100%. Any ideas? Again, thank you for taking time to help with this and everything else you do for us!
Also, here is that latest jsFiddle with your suggestion included: https://jsfiddle.net/cjsoseman/oxLsrbz7/9/
I'm afraid I don't immediately know what is going wrong there. I'll need to come back to it when I have a little bit more time available as it might take a little bit of time to debug.
Regards,
Allan