Multi Column Layout using Flex-box

rf1234

I have been using this for quite some time: https://editor.datatables.net/examples/styling/columns.html
with the Flex-box CSS that you posted in the upper right corner.

That CSS supports the left to right flow very well.

Would you have some CSS for a two column modal using Flex-box with flow top to bottom? I couldn't figure it out myself unfortunately.

allan

Hi Roland,

Yes indeed it can be done - you need change the flex-direction to be column, but you also need to specify a max-height for the container, otherwise they just stack up down the left:

div.DTE_Body div.DTE_Form_Content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 170px;
}

Allan

rf1234

Thanks Allan!!

but you also need to specify a max-height for the container, otherwise they just stack up down the left:

I didn't have max-height in there. Now it works.

Is there a way to keep the size of the popup dynamic - as with flex-direction "row" - and assign the fields to column 1 or column 2? Using "className" for example.

I have so many dependencies between the fields and I would like to have the colored background stuff always in the second column and exclusively in the second column. So "Dokumentation" should actually be in the first column (which it can be if less fields are shown in the left column but not in this case. I use "dependent" to show and hide fields based on business requirements.)

Thanks for your help with this, Allan!

allan

I wonder if you might be better served with column-count here rather than using flexbox: http://live.datatables.net/nuvihosi/95/edit . That way the height is done dynamically for you.

It isn't as flexible as flexbox in other ways, but it might do what you need here.

Allan

rf1234

Thanks a lot for digging into this for me, Allan!

In the meantime - with more fields - I took a different path: I separated all the fields on VAT and VAT assessment into a one column Editor instance. No problem with "left to right" by definition ...