This is a unique styling feature of Select Field, so you will meet it in its Select settings section only. It defines the width of the select field as a percentage of the general form’s width or width of the column you placed it in.

By default, it is set to 50% but in fact, it will occupy the full width of the form or column. To set the select width to 50%, you will have to move the slider manually or type the needed value into the bar.

width set to 50 in the select field

This styling feature allows you to set the height of the Range Field’s range. That’s why you can meet it only in the Range section of that field’s Block Style tab. The height is defined in pixels and set to 5 by default. However, you can type into the bar the number from 1 to 20 or choose the value by moving the slider.

Here’s how the range looks like when the height is set to 1:

setting minimal range

And now let’s change it to 20:

setting bigger range

Every element, be it the whole field or its parts, such as label or description, is placed in a box. That box becomes visible when you change the Background Color of the element. The Padding is a space between the edge of the box and the element it contains.

This is how the Text Field label looks like when its Padding is 0:

zero padding

And now pay attention to how it looks like when the Padding is 20:

setting bigger padding

The measurement unit for Padding is the pixel. By default, all the sides of the padding are linked, and you can change all of them at once by typing the value into the bar. However, you can also set different values for different sides. Click on the little blue button with a chain-like icon on it. The four bars you will see are related to the top, left, bottom, and right sides of the padding.

reset button to get zero padding

To link the sides again, just click the same button. You can also reset the values to zero by clicking the “Reset” button.

Every part of the field is placed into a box. When you choose the Background Color, it is the box that changes the color according to the one you have selected. The Margin is a space between the border of the box and the surrounding elements. 

Here’s how the Text Field label looks like when the margin is equal to zero:

zero margin in the text field

And now let’s set it to 20:

setting bigger margin in the text field

The Margin is set in pixels. You can set the same value for the whole margin or choose different values for different sides of it. Press the “Unlink Sides” blue button on the right side of the value bar and you will see four cells for different sides of the margin. The cells correspond with the sides like that: the first one – top side, the second – right side, the third – bottom side, and the fourth – left side. The square-shaped icon in the left corner will show you which side you are working with right now.

unlinked margin in the text field

If you need to cancel the changes, press the “Reset” button. You can also make the margin whole again by clicking on the “Link Sides” button.

You will stumble upon this feature in the Items settings section of Checkboxes and Radio Fields. Moreover, it works only if you choose the “Line” option in the Filters Position block. It defines the space between the radio button or checkbox and the previous option. By default, it is set to 0 but you can change that value by dragging the slider or typing the needed value in pixels.

defining horizontal offset within the range

You will find this styling feature in the Textarea and Group Break Fields; it is responsible for the general height of the element. In the case of Group Break, it is the height of the line that divides groups, and in the Textarea Field, it defines the height of the text area. The value is set in pixels and you can type the concrete number into the appropriate bar if you know exactly how high the element has to be. Or, you can play with the slider to find the perfect value manually.

height settings range