Pages

Resizable Container

What is a Resizable Container?

A Resizable Container allows you to keep the positions of all inner elements fixed, while their size automatically scales when the container itself is resized. This ensures that your UI remains responsive and visually balanced across different screen sizes.

Key Characteristics

• Elements stay in place (same position relative to the top-left corner)
• Element size scales proportionally with the container size
• No need to calculate positions manually
• Supports responsive layouts without writing layout logic

When should you use it?

Use a Resizable Container when:

• You want a layout that scales proportionally across devices
• The visual arrangement of elements should remain consistent
• You need a simple and fast way to achieve responsiveness
• You are working with fixed screen ratios (e.g. 16:9 or 4:3)

Practical Example

Let’s say you design a dashboard for a 1280×800 panel:

1. You place a button at position x = 100, y = 50, size 200 x 100
2. Inside a Resizable Container, if the screen is resized to 640 x 400, the button will now automatically scale down to 100 x 50, while staying in the same relative position
3. The spacing and proportions look the same, just scaled