Retool Custom Component Dynamic Height: Fix Auto-Resize

If you've built a custom component in Retool and noticed it doesn't resize the way native components do, you've hit one of the platform's most common friction points. By default, Retool custom components use heightType: "fixed", while built-in components like the Image component use heightType: "auto". The result: your custom component stubbornly holds its original dimensions no matter how the browser window changes or how much content is rendered inside it. This guide explains exactly what's going on and how to get Retool custom component dynamic height working in your app.

Why Retool Custom Components Don't Auto-Resize by Default

Retool's native components are built with layout-aware height logic baked in. When you drop an Image component onto the canvas, it calculates its height relative to the content inside it and the surrounding grid. Custom components, on the other hand, live inside an iframe — a sandboxed browser context that Retool can't introspect by default. Because Retool has no automatic visibility into how tall the content inside that iframe actually is, it falls back to a static, fixed height. This is a deliberate isolation tradeoff, not a bug, but it creates a real problem when you need your component to behave responsively.

Common scenarios where this bites developers include:

• A custom image viewer where the image needs to scale with the container
• A component that renders a variable number of data rows and overflows instead of expanding
• Any custom component embedded in a responsive layout that changes at different browser widths

The Beta Feature That Fixes This: Dynamic Height for Custom Components

Retool has a beta feature that enables dynamic height for custom components — essentially giving them the same heightType: "auto" behavior that native components enjoy. When enabled, Retool listens for height signals from your iframe content and adjusts the component's height on the canvas accordingly. This is exactly what the native Image component does under the hood, and it makes a huge difference for content-driven layouts.

As of the time of writing, this feature is not enabled by default on all Retool Cloud accounts. To get it turned on, you need to contact Retool support or post in the Retool community thread and ask for it to be added to your account. The Retool team has been enabling it on a per-account basis while the feature matures.

How to Set Up Your Custom Component for Dynamic Height

Once the beta feature is enabled on your account, here's how to structure your custom component's iframe code so the height responds correctly to content changes:

• Step 1: Make sure your body and root container elements don't have hardcoded pixel heights. Use percentage-based or content-driven sizing instead.
• Step 2: Use display: flex on your root container so child elements can dictate the height naturally. Avoid height: 100vh or fixed px values on wrappers.
• Step 3: If your component renders variable content (like dynamic rows of data), ensure the container expands with the content rather than clipping it with overflow: hidden.
• Step 4: Use window.Retool.subscribe in your iframe code to stay in sync with the Retool model if your layout changes based on model values.
• Step 5: Test by toggling the browser window width and adding/removing content from the model to confirm the component height tracks correctly.

Here's a minimal CSS baseline that works well with the dynamic height feature enabled:

body { display: flex; justify-content: center; align-items: center; margin: 0; }

#image-container { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; overflow: auto; }

img { width: 100%; height: auto; object-fit: contain; }

Notice the key change: height: auto on the img tag instead of height: 100%. When paired with the dynamic height beta feature, this lets the image's intrinsic aspect ratio drive the component height rather than forcing it into a fixed box.

What to Do If the Feature Isn't Available on Your Account Yet

If you're on Retool Cloud and the dynamic height option isn't visible in your custom component settings, your best path is to reach out directly. Post in the community forum or open a support ticket and ask for the dynamic custom component height beta to be enabled. The Retool team has been responsive about enabling it on request.

In the meantime, a common workaround is to use window.parent.postMessage from inside the iframe to communicate height changes back to Retool, then use a transformer or event handler to manually set a height variable that controls a surrounding container. It's more wiring than you'd like, but it works until the feature is fully released.

When This Feature Goes GA, Here's What to Expect

Retool's team has signaled that dynamic height for custom components is part of a larger custom component investment on their roadmap. When it ships broadly, you should be able to toggle heightType between fixed and auto directly in the component settings panel — no account-level flag required. For now, treat the beta as production-ready for Cloud accounts where it's been enabled; multiple teams are using it in live apps without issues.

If your Retool app relies heavily on custom components — especially ones rendering images, dynamic lists, or data-driven layouts — getting Retool custom component dynamic height enabled should be near the top of your configuration checklist. The difference in user experience between a component that clips content and one that breathes with it is significant, and it's worth the five minutes it takes to request access.