Skip to main content
Size
Updated over 2 months ago

In Instant, you size Elements by setting their height and width as:

  • Fixed.

  • Relative to the Element it is in.

  • Fitting the content.

  • Filling the Element it is in.

You set an Element’s width and height separately.

Fixed

If you set Fixed dimensions, you decide what the number of pixels (PX) an Element is high or wide. The Element will stay that size, even if its contents or the Element it is in changes in size.

Relative

When you Relatively size an Elements, you set its height or width as a percentage of the height or width of the Element it is in.

So, a relative width of 50% means an Element will only take up half the width of the Element it is in. Same for height; if you set it to 75%, it will only be 75% of the height of the Element it is in.

Fit

When set to Fit, an Element will match its size to the size of the Elements and spacing in it.

For example, if an Element has:

  • its width set to Fit,

  • no spacing added, and

  • only an image in it,

changing that image's width from 200PX to 400PX, means the Element will also change its width from 200PX to 400PX.
If you keep the image's width at 200PX, but add 50PX of horizontal spacing on either side, the Element's width, if it is set to Fit, will go from 200PX to 200PX + 2 * 50PX = 300PX.

Fill

When set to Fill an Element will use all the available space.

The available space in a Box element or on a Page is all the space that is not used by Spacing or other Elements.

If multiple Elements in a Box element are set to Fill, they divide the available space among them.

Overflow

With Overflow you decide what happens when Elements are too big for the Box element they are in.

Show

If you set an Element to Show, the Elements in it will be visible even if they go over its outer limits.

Hide

If you set an Element to Hide, only the Elements and parts of Elements within its outer limits will be visible.

Scroll

An Element that is set to Scroll will show scroll bar if the Elements in it are too large.
It will make create a scroll both horizontally and vertically. However, if you turn Wrap on in the Layout section, the Element will only create a scroll in one direction. This is because having the Wrap on means the Element never overflows in the primary direction.

Did this answer your question?