Issues with flex box inside of dialogs

We’ve been experiencing issues with flex boxes inside of dialogs with visibility groups/tabs.

A simple example: we have 3 containers, and the middle one should grow to push action buttons to the bottom of the dialog. This displays correctly inside of preview in Create (left) but doesn’t render correctly in the browser (right).

Anyone else experiencing the same? And if so, have you found any workarounds other than fixed height of containers?

Hi, Joanna

I will note this behavior with the devs team and register a challenge if this is an error, thank you for the feedback!

I did find a setup that allowed for the middle container to fit the space left between the others inside the flex parent.

Dialog: Display - Flex, Layout - Horizontal, Height/width - 500px
Container (outer): Sizing - Stretch, Display - Flex, Layout - Vertical
Sub container 1: Display - Block
Sub container 2: Sizing - Stretch, Display - Block
Sub container 3: Display - Block

I hope this helps :slightly_smiling_face:
Nikoline

1 Like

Are you using tabs or another type of visibility group?

Hi,

I tried to add visibility groups and tabs, and ended up with this setup:

I added:
Tabs inside Sub container 1
Visibility group inside Sub container 2

I changed:
Sub container 2: Sizing - stretch, Display - Flex, Layout - Vertical

On the containers inside this visibility group i set Sizing - stretch.

This seems to work now without any changes to my setup, so perhaps it got fixed with the last Create update. Thanks for you help @Nikoline!

1 Like