Datatables Responsive Inside Flexbox Doesn't Hide Columns

CoreBio

I have been trying to setup my datatable inside a flexbox layout. But, when I have a column on the left side, the datatable bleeds out too wide on the right side of the page, and the responsiveness doesn't work. If I delete the column, it works just fine. Something about it having the column next to it makes it not work. I am pretty sure it is a datatables issue, not a flexbox issue, but I could be totally wrong. Any help would be greatly appreciated. Here is an example:

http://codepen.io/dbalders/pen/oxNjOg

Thanks,
David

allan

Hi David,

Thanks for the test case. It seems likely that this is related to how Responsive calculates the column widths before removing them and some kind of compatibility issue with flexbox. I'll take a look into tomorrow.

Allan

allan

I'm not sure my knowledge of Flexbox is going to be enough to resolve this - the table container has a width of 100% - does that not mean 100% width of the parent div like in non-flex box layout? I've experimented a bit but haven't really been able to figure out what is going on yet I'm afraid. I need to get my head around flex box a bit better :-)

Allan

CoreBio

Hey Allan,

In my example, #flex is the full width of the page. Then, #column takes up 300px of the page width, and then #table will take up what is left over since it is set to 100% (could also do the same thing with flex-grow: 1; or flex: 1 1 100%;). So the 100% is not applying to the full parent, but rather to the remaining space within the flexbox. Does that answer what your question?

Here is an example using just colors rather than a datatable:

http://codepen.io/dbalders/pen/yOyazQ

Thanks,
David

allan

Hi David,

Yeah - I thought that, but what bothers me is that if you open the inspector in your browser for the DataTables example and hover over the #table element, you will see it expands to the overflowing part. Normally I would have expected it to highlight only the area that it should take up and the table can overflow that.

As a little experiment I just added overflow: hidden to the #table and that actually appears to allow it to work as expected: http://codepen.io/anon/pen/ZWYoER .

Allan

CoreBio

That seems to work. I'll follow up later on if it breaks, but that seems to have done the trick. Thanks Allan!!