Bug - column width too large when using Bootstrap tabs with table-layout:fixed

wzyla

Hello,

I have encountered a bug when using DataTables with table-layout:fixed inside Bootstrap tabs, an example is here:

http://jsfiddle.net/93ty76jc/4/

It looks like the columns.adjust() uses screen width to calculate column widths in this case instead of parent component width.

allan

I don't think it is columns.adjust() that is causing the issue here in fact - you will see the same effect if you disable the tabs and don't call that method (i.e. the window scrolls still).

Instead, what appears to be happening is two fold:

• DataTables sets box-sizing: content-box for the th and td cells to make the column width calculations easier. That appears to mean that in table-layout:fixed the width is being added to the padding, where is where most of the scrolling comes from.
• The rest of the scrolling is from the padding on the col-md-12 class.

DataTables hasn't been extensively tested with table-layout:fixed yet, so I'm afraid bugs like this will be present. I hope to improve that in the next major version of DataTables.

Allan

wzyla

Thank you for your response Allan.

I assumed it's caused by colums.adjust() because we use exactly the same html in another place of project minus the tabs and there it works fine.
Also removing the shown.bs.tab callback makes it work until data is loaded and user scrolls the browser window.

Hope this helps.

Wojciech