Understanding Layout

The main goal of the layout system is to ensure that SPZ elements can express their layout so that the runtime can infer the sizing of elements before any remote resources, such as JavaScript and data calls, have been completed. It is significant since this significantly reduces rendering and scrolling jank.

Note that every SPZ element must have a layout attribute.

Depending on the value of the layout attribute, SPZ elements maybe have a width or height attribute that contains an integer or floating-point pixel value.

Supported values for the layout attribute:

Its children’s space defines its size, such as an HTML div. The width and height attributes are not required.

The element takes the space available to its width and resizes its height automatically to the aspect ratio is given by the width and height attributes. The width and height attributes must be required.

The element has a fixed width and height attribute with no responsiveness supported. The width and height attributes must be required.

The element takes the space available to its width but keeps the height unchanged. The height attribute must be required, but the width attribute must not required or must be equal to auto.

The element takes the space available from its parent container. The width and height attributes are not required.

The element and other elements in its parent with layout type flex-item take the parent container’s remaining space when the parent is a flexible container (i.e. display: flex;). The width and height attributes are not required.

The element takes the space available to it and resizes its height automatically to the aspect ratio given by the width and height attributes until it reaches the element’s size defined by the width and height attributes, or reaches a CSS constraint, such as max-width. The width and height attributes must be required.

The element is not initially displayed, and takes up zero space on the screen as if its display style was none. It will be shown when its open action is triggered (e.g. spz-lightbox, spz-sidebar). The width and height attributes are not required.

The element takes up zero space on the screen. It is used only on the spz-event component. The width and height attributes are not required.