Radio Button and Checkbox Group Item Alignment

Arclab® Web Form Builder

Radio button and checkbox groups can be aligned both horizontally and vertically.
Furthermore, a combination of vertical and horizontal alignment is possible, wherein the width of each element can be set individually.



Vertical Aligment (default)

After adding a radio button or checkbox group to your form, all items are arranged vertically, one item per line.
The "Width" ("Item Width") for each item is "100%".


Vertical alignment

Horizontal Alignment

Click on the "Set Width (Alignment) for ALL Items" icon to open the "Change Item Width" dialog.
This dialog sets the item width for all elements:


Change alignment dialog



Horizontal Item Alignment (Auto Width)

If you use option "Horizontal Item Alignment (Auto Width)", the width of each item would be set automatically.


Sample auto width 1


However, this automatic arrangement means that the items are not evenly spaced (each item has a different width), which is particularly noticeable if the group contains a large number of items or long item texts:


Sample auto width 2



Horizontal Item Alignment (Custom Width)

If you use option "Horizontal Item Alignment (Custom Width)", the width of each item would be set to the specified width.
In this sample we set the width to "20%":


Custom width all items


The result looks like e.g.:


Result custom width all items

Custom Alignment

In some situations, neither one nor the other "Alignment" option is ideal. In these cases, you can specify the width of an item directly.
Select the item you want to change and type in the "Item Width".


In this sample the "January" item needs more space, so we adjust the "Item Width" from "20%" to "40%", so that it has more space but the items are still aligned:


Custom align 20 percent



If an item should use the full row type in "100%" as "Item Width".
This results you a combination of horizontal and vertical alignment, e.g.:


Custom align 100 percent

Multi-line Text in Radio- and Checkbox-Group Items

For radio or checkbox groups, the texts next to the icons are formatted as single-line text. However, you can change this by using HTML code instead of plain text.


For example, enter the following HTML code for “Item Text” (Text/HTML):

<div style="line-height:1.25;">Line 1<br>Line 2</div>

Important: Only use HTML for "Item Value", no HTML code may be used for "Item Value"!


Multi-line radio and checkbox items


If the individual items are now too close together, you can move the <div> down using padding-top, for example.

<div style="line-height:1.25;padding-top:1em;">Line 1<br>Line 2<br>Line 3</div>