Sizing Forms and Elements

Flexibly size your elements and overall form using fixed and responsive units.

Forms and elements on the forms can be sized using the following units.

Fit

Containers will resize automatically to fit any content placed inside, making automatic layouts a breeze.

Fill

Enables containers and groups to grow to fill the view, allowing for centered forms and more.

Pixels (PX)

Set the dimensions of a container or group to an exact numeric pixel value.

If a form sized in pixels is greater than its screen, it will shrink to fit accordingly.

What dimensions should I use for my form?

Use Fit if you plan to embed your form in a responsive container. Great for adding a form to a new page on your website.

Use Fill if you want a stand alone full screen form. Perfect for sharing a link straight to the your form.

Use exact PX if you plan to embed your form in a fixed scale container. Best for fitting a form on your website page that already has other content.

What dimensions should I use for my containers and elements?

Use Fit if you want the container to be responsive to your element and maintain an exact scale regardless of the screen size.

Use Fill if you want the container to grow as wide as the screen size allows. Great for 100% scale elements on mobile.

Use exact PX if you want a fixed container for your element. Great for 100% scale elements on desktop.

Use multiple fill containers to create equal spacing.

Percentage elements will take priority over fill elements. For equal spacing, place your 100% element inside a fill container next to other fill containers.

Ex. 2 fill containers in a group = 50% each. 4 fill containers in a group = 25% each.

Demo