Stacks beta signup 🍔

[kent]

Hey All,

Last Dev Day, we talked about Stacks, which are flexbox-like containers that can provide more layout granularity than Retool’s 12-column grid. We’re ready to launch Stacks in a private beta for Cloud users. If you’d like to test Stacks, please fill out this form. Stacks are live on cloud and self-hosted v3.75+.

If you have any feedback, please feel free to share it in this thread or by emailing kent@retool.com. Stacks are not yet fully featured, but they’re stable enough to start to use in apps and experiment with. Here’s a non-exhaustive list of the next things we’ll be working on:

• A flex-wrap equivalent
• Adding stacks as a layout option on all frames (sidebar, header, main)
• Directly specifying component height/width with pixel values
• Reordering Stack components in the component tree instead of by dragging on the canvas

There are a few known bugs & ergonomic issues:

• Copying and pasting within a Stack does not add the pasted component to the end of the Stack
• Copying and pasting within a Stack does not preserve component height/width settings

How do I turn stacks on?
Stacks are an option on Container and Group components – they can be toggled by setting a container’s “Display” property to “Stack”.Thanks!

[Gabriele_Filaferro]

Hello!
I noticed that when I try to use a stack in the header of a sidebar the stack throws some errors and then remains hidden.

Is this not supported or not intended?

Thank you

[kent]

Hey @Gabriele_Filaferro - that is unexpected, stacks should work fine in the header of the sidebar. I just tested it on my side and and it seems to work. Are you able to consistently reproduce?

[Gabriele_Filaferro]

Hi, sorry the issue I found yesterday is not strictly related to the sidebar but to stacks in general:

• after adding a stack, the Retool UI shows a few error notifications and an error in the stack;
• even if the UI lets me add widgets to the stack when I enter preview mode the stack is not showing;
• only once I reload the page I see the stack I created before, but it is empty (I can still add components to it)

This is not an actual blocker because in the end as I'm still able to add and use stacks, but it is quite cumbersome.

Here is a video of the behavior.

Please le me now if I'm doing something wrong or you need additional info.

Thanks

[sawyerstripe]

Hi there, digging the stacks feature. Unfortunately I'm seeing what seems like a bug, where once a component is in the stack, the drag & drop feature doesn't work for reordering within the stack or to move the component out of the stack. Chrome 129.0.6668.103 on Mac.

[Paulo]

Hi @Gabriele_Filaferro are we still experiencing this issue?

[Paulo]

Hi @sawyerstripe, welcome to the forum!

We just created a bug report for this bug and will let you know when is fixed. On the meantime, I recommend using a Container component with a 'Stack' display setting. This should let you reorder the nested components without any issues.

You can find this component's setting under 'Layout' in the inspector.

[drewski]

Hi - when I set a container to Stack, the header and footer add-ons do not seem to inherit the Stack functionality. They seem to want to, as components within them have the Stack properties (e.g., width/height sizing) but they don't actually do anything, and the experience is similar to that of non-Stack settings. Is this a bug or expected functionality? I can get around it by nesting a container within the header/footer and setting that to Stack, but wasn't sure if that was the desired way of going about this.

[Paulo]

Hi @drewski, this is expected functionality, but great feedback! We've created an internal feature request to support stack layout in the header and footer of the Container component.