Table in Bootstrap tab not resizing when tab shown
Table in Bootstrap tab not resizing when tab shown
I've got a classic case of a DataTables table not being displayed correctly when contained in a Bootstrap tab pane when that pane is not visible when the page loads. Per the suggested solution documented here, I've added an event listener for the tabs' shown.bs.tab
event and am calling the .columns.adjust()
function. However, even though I've proven that the event is firing as expected and that the DataTable.tables({ visible: true, api: true })
object definitely contains my table, the table is not resized when as expected when the tab is shown.
I've been able to replicate the problem in this fiddle using the sample code for Bootstrap tabs from their docs and the sample code for the solution from the DataTables page linked above.
As you can see by testing the fiddle, when the Test Table tab is shown, the table within is not resized. I've added a line to write to the console the number of tables found by the DataTable.tables({ visible: true, api: true })
command, again to prove that an API instance containing the table is being created as expected.
Am I doing something wrong or is this a bug?
This question has an accepted answers - jump to answer
Answers
Add
style="width:100%"
to thetable
tag as shown in this example. Updated fiddle:https://jsfiddle.net/f1Lks940/
Kevin