Multiple DataTables with vertical scrolling look odd
Multiple DataTables with vertical scrolling look odd
scifi
Posts: 6Questions: 2Answers: 0
Hi!
When applying DataTables with vertical scrolling on multiple tables at the same time the first table looks right, but all others do not have the right column sizes. If also vertical scrolling is enabled, the columns are even misplaced in the middle of the table.
Is this a known issue? In any case I would appreciate some hints how to avoid this.
HTML:
| Name |
|---|
| localhost |
>
| Name |
|---|
| ftp |
| nrpe_disk |
>
| Name |
|---|
| dummy |
| ftp |
| nrpe |
JavaScript:
$(".datatables").DataTable({
"bSortClasses" : false,
"paging" : false,
"scrollY" : "300px",
"scrollX" : true,
})
Thank you.
Kind regards,
Denis
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Oh, HTML is not handled correctly :(. So there are just 3 tables with the class datatables.
Ok, I've found that this is because the tables are loaded in Bootstrap tabs. I need to apply DataTables only when the tabs are activated as they are hidden before the tab is opened.
Sounds like you want to take a little look at this example: http://datatables.net/examples/api/tabs_and_scrolling.html . It is specifically for jQuery UI tabs, but the same applies for any other tab library, including Bootstrap.
Allan
Yes, this indeed helps! I implemented event listeners for tab changes, but this facilitates everything :). Thank you!