Retool tip: container expand to fit option and padding

November 29, 2024

A little workaround to make expand-content-to-fit option works with padding

Retool added the option "expand content to fit" to containers.

It's neat since it allows creating a fully fluid layout that adapts nicely to any window size.

However, there’s a downside to this.

The option forces you into two constraints:

While we can manage having a single component, getting rid of padding might be an issue.

Let's work around this with a bit of CSS

You know, Retool is pretty much fully hackable.

You can add CSS to change some defaults.

In this case, we want to add padding to a container that doesn’t allow a padding setting—this happens when the "expand content to fit" option is enabled.

Let’s suppose the container we want to fix is named container1.

To have fully functional padding on a container with the "expand-content-to-fit" option enabled, here’s the CSS you need to add in the CSS settings panel:

[data-testid="RetoolGrid:container1"]{
  padding: 0 20px!important;
}

Keep in mind that the component name need to be preserved, or just keep updated the CSS selector with the component name.

Here you can see the effect, with yellow highlighting the padding.

Happy hacking!

Have a business need or a project in mind?

We help ambitious companies ride the change