Columns (strange) behaviour with display

Hello,
I got a “columns” element nested in Collection list. There are several flexboxes inside columns mapped to the values from object elements.

When I select empty “contract” flexbox and turn off visibility, the list nicely wraps.

BUT if I try to bind to bind it to show only if “contract” is not empty, it’s getting broken. The wrapping no longer works.

Am I missing something? Would appreciate any help.

Is your justify/alignment set to align left in the wrapper container?

Screen Shot 2022-04-13 at 1.17.50 AM

Hey Kevin, I guess it’s not a problem with alignment. The flexbox behaves differently if you manually turn the display on/off and if you try to bind it. I’m attaching a short gif to visualize that.

display_problem

1 Like

Ha! Indeed you’re right. Thanks for noticing this @Cichy.

We’ve added it to the roadmap.

In the meantime, just had a look in one of my projects: a decent workaround would be to nest your repeated items inside a flexbox container instead of a columns element.

Here’s a short video explaining how.

1 Like

Thank you Joyce for your explanation (and video :)). It works well when using container instead of columns.

1 Like