Width

Most controls have a width property. For input controls, the property specifies the width of the area in which users enter data; for example, you might narrow a control used for entering zip codes or widen a control for a full first, middle, and last name. A common example is setting a text control's width to 90% for street addresses when you use the text control inside a panel as part of a two-column layout. (When a control is inside a panel or other grouping control, the width percentage is relative to the grouping control. When a control is not inside a grouping control, the width percentage is relative to the entire form.) 

This property is crucial for panel controls because you must adjust the panel widths before your columns will line up side by side. For tab controls, you access the width property by clicking the unlabeled area to the right of the last tab in your tab group; the width you specify will be applied uniformly to each tab in group. (See Panels and Tabs for more details.) 

There is no Width property for section or repeat controls; however, you can edit the Width property of controls you drag inside these controls. Also, if you drag a section or repeat inside other group controls,  automatically adjusts the width to a sensible size. 

When setting a control’s width property you may use standard CSS-relative values; for example, 5%, 5em, 5ex or 5px.

Item Width

Radio and Checkbox controls have an extra property called Item Width. You can use this property to change the layout of the options from vertical (one radio/checkbox button below the next) to horizontal. This is useful to save vertical space on long forms. And also useful to improve ease of use for forms with questions that each have the same set of options.

See this image as an example:

Option Width

Radio and Checkbox controls have an extra property called Option Width. This property is useful when your option values are longer than a single line. In some cases this may cause the option value to start below the radio or checkbox on certain browsers. You can correct this by selecting a smaller option width such as 80%.

Here is an example of a checkbox option that spans multiple lines:

In order to adjust the formatting so the option aligns next to the checkbox, option width was set to 80%. This is how the checkbox looks after setting option width:

Margin and Padding

These are two separate style properties, but they are similar and often used together. The margin lets you add extra space around the outside of your control, while the padding permits you to add extra space within your control’s boundary. 

In this example below, the controls have margin and padding properties of 30 px (pixels).

Type your margin and padding properties using standard CSS syntax. Type a single value such as 5% to apply a 5% margin or padding uniformly on all four sides of the control.

You can also specify different margin or padding on the various sides of the control: for example, a 5px 10px 15px 20px margin property will give your control a five-pixel top margin, a ten-pixel right margin, a 15-pixel bottom margin and a 20-pixel left margin.

Background Color

This lets you specify the color that will appear behind the control. Type any valid CSS color name or its hexadecimal RGB equivalent. For example, if you want a red background, you can type the word RED or #aa2211.

Border Width, Border Style and Border Color

These properties let you specify the thickness, format and color of a border around any control. With the exception of sections and repeats, the border is applied only to the area where the user enters data and does not surround the control’s label.

For tab controls, click the unlabeled area to the right of your right-most tab to access the border properties.  Your border properties will be applied uniformly to each individual tab in the tab group. You may not apply borders to panels but you may create borders around controls you drag inside panels. 

Remember to make the border color property different from the form’s background color or users will not be able to see the borders. Specify the color using the standard CSS convention of typing the name of the color or its hexadecimal equivalent.  When specifying the border width property, using pixels (5px, for example) works best. Border style changes may not be visible if a Border Width is not specified. 

Label Color and Label Size

These properties give you an easy way to change the font size and color for any specific control on the form. Specify the color by typing any valid CSS color name or its hexadecimal equivalent.

These properties work well when you want your entire label to have the same size and color, but for more sophisticated labels you can type XHTML in the control’s label property field. For instance, use XHTML if you want to apply two different font colors inside the same label. Typing XHTML also gives you more font precision, since the label size property lets you pick generic font sizes only--small, medium, and so on. There may be controls for which you want a font size somewhere between the small and medium options in the dropdown, for example.

Bold

Check this checkbox to make the control's label bold.

Italic

Check this checkbox to italicize the control’s label.