Flexbox in container

Hello, we are wondering if it's possible to use CSS Flexbox in a Retool container.

For our use case, we have a container with multiple buttons:

What we would like to do is being able to dynamically show or hide these buttons but by keeping the flexbox alignment. For example like this if we hide the Export button:

Do you have an idea of how to do it in Retool ?

Hi @aturiot! We don't currently support a way to do this with multiple components, but the button group component behaves this way :slightly_smiling_face:

Would you be able to use a button group component for your use case?

Hey @Tess, thanks for the answer :slight_smile: I just checked the button groups:

  • it looks a bit complicated to make the appearance looks similar with some CSS tricks, but it's seem technically feasible
  • the behaviour of the button groups is more like a radio group, so we first need to disable that to be just buttons
  • we are currently using a modal button, so we need to put it hidden elsewhere and open it with an event

At the end, this solution seems too complicated and hard to maintain, so we will check for another one :sweat_smile:

1 Like

We are also interested in this.
Here is our use-case:
We have a spot where the user can upload a photo or type a comment:

We want to re-arrange it like this, and have the image container hidden if self.src is empty then to hide the image:

If the image is hidden, the other components would fill in the empty space to the left.

Hi @Kade333 Thanks for reaching out! I'm moving this thread over to our feature requests section for visibility

It would be great to have more native support for this.

In the meantime, I'm wondering if you could workaround this limitation by using our tabbed container component (with the tabs header hidden from view). You could have one tab that shows an image and one where it doesn't and then show the appropriate view conditionally. Definitely a bit hacky, but hope that helps for now

2 Likes

Thank you for the alternative method. This does mean maintaining two components instead of one- and I worry about the apps getting too complex and performance taking a hit. But, it is currently better than nothing. :slight_smile: