Datatables Responsive Inside Flexbox Doesn't Hide Columns

Datatables Responsive Inside Flexbox Doesn't Hide Columns

CoreBioCoreBio Posts: 12Questions: 5Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • CoreBioCoreBio Posts: 12Questions: 5Answers: 0
    edited February 2016

    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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • CoreBioCoreBio Posts: 12Questions: 5Answers: 0

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

This discussion has been closed.