[RESOLVED] Set display: flex on a List

Hi there,

Its possible I’m missing how to do this but I’ve been messing around for a while and I can’t achieve this. I believe the problem is because I can’t set display:flex on a list container. The effect I want to achieve is rows of 3 images side by side. (For reference this is the project I’m working on: https://build.draftbit.com/apps/vHfGliBk/screens/x3nyhRdU )

This is what I’m getting:

Looking at the styling in the code, I see this:

I created a JSFiddle to mimic this. However, I added ‘display: flex’ to the flatList and I was able to achieve the desired rows of images effect. However, I can’t figure out how to get display: flex added to flatList via the Draftbit UI. JSfiddle here: https://jsfiddle.net/p61q7s8o/

Possibly not a bug maybe just something I’m missing in the UI. Possibly a missing feature?

Thank you! )

1 Like

Hey @Chris_Dzoba,

Thanks for reporting this! Can you set “2 columns” on the List element? That should do what you want it to

Aha, there it is! I was searching all over the Styles pane, didn’t realize I should look on the Configs pane. Thanks again @peter

Looking good now.

1 Like