Managing component style properties

Alignment

Align and Justify

The page builder provides various alignment options to align the components placed in the body of the page. The alignment can also be done within a container, a master details container, a tab container, and a popup container.

Here you can see how different alignment options affect the placement of the selected component in a page. With more components, you can try out various combination of alignments to make the page more optimized.

Overflow

Overflow can be set as auto, hidden, or visible. On setting the overflow as auto, the scroll is automatically formed at the end of the page. You can scroll down to see the other components in the page. On setting the overflow as hidden, the page breaks at the end and you will not be able to scroll down to view other components.

Sizing

Sizing offers you the flexibility to set the width and height of the components. This can be set as a percentage (%), pixel (px), and auto. In “auto”, the size is adjusted automatically to the original size of the component.

You can also set the minimum and maximum width and height. Again, this can be set as a percentage (%), pixel (px), and auto. There’s also an option to set it as “none” if you do not want a minimum or maximum width and height.

Padding and Margin

While padding lets you create space inside a component, adding a margin creates space around the component. This can be used to move certain components to the desired spot without having to align them.

You can either choose to set the same margin and padding values for all corners or give them different values, it is up to your preference.

Border

A border is used to provide a definite shape to a component. It can also be used to differentiate one component from another.

The radius option lets you define the four ends of the component. Setting a radius gives a curve to the component edges.

Shadow

There are four different shadow options available in the style properties. Each option differs by the intensity of the shadow effect applicable. For example, shadow level 1 provides a thin shadow while shadow level 4 provides a thicker shadow effect.

Background

In the body of the page, the background type can be set as an image or a color. 

While setting the background type as an image, the background fit can be set as:

• Auto: In auto, the size is automatically fit to the size of the body. 
• Cover: In cover, the image keeps its aspect ratio and fills the given dimension.
• Contain: In contain, the image is resized to fit the given dimension but the image retains its aspect ratio.

For the components on the page, the background type is automatically a color. The color can be modified by choosing any color from the palette or by choosing a custom color.