Select components in builder to 'Wrap in a new container' - App Builder

I spend a decent amount of time as a designer/dev in the App Builder; I often find myself needing to wrap a few components I have in the editor into a new container.

Current Workflow Challenges

  • Layout Disruption: Adding a new container often disrupts the existing layout due to its default size and styles.
  • Time-Consuming Adjustments: Manually moving components into the new container and removing its default styling (padding, margins, headers, borders, background) is tedious.
  • Layout Repair Needed: The introduction of a new container frequently necessitates layout adjustments to restore the desired design.

Proposed Solution:

User -> Select 1+ components -> Right click -> 'Wrap in new container'

  • Automatically wrapping components would preserve the existing layout, eliminating the need to drag in a new container that disrupts the flow.
  • Ideally, the new container would inherit minimal or no default styling,

I imagine any use wanting to create nicer layouts in Retool will have this problem. I understand the beauty of the 12 column grid system; but containers are a crucial mechanism to get more control and refinement over the layout within this system. By focusing on improving workflow efficiency and reducing the time spent on repetitive tasks, the tool can become more appealing to a broader range of users.

1 Like

Hey @dominic-rg! We do have an existing feature request for this and I've added your thread here to that internal ticket. I'll update you here as I receive any additional information to share. Thanks!

1 Like

@dominic-rg you can now cmd-g to "group" elements in an unstyled container.

Let me know if you have any feedback.

Here's a quick demo.

3 Likes

Damnn :fire: ; great job!! Super clean; love that there is no styling applied + uses keyboard shortcut; and "group" is much more friendly than "Wrap in new container" :joy:!

I guess the only feedback is if you can 'group' then maybe you should also be able to'ungroup' ; but that is far less important and a good future follow-up improvement.

A+ work team.