Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Section
Column
width0px
 

To access a control’s style properties, click on the control in your form, then click the Style tab in the Forms Designer’s Property area.

Some controls have more style properties than others, so the specific style properties you see depend on which control you click in your form. As you define style properties for individual controls, remember that these will override any form-level properties you have defined. Each control style property is described below. For more complex styling consider customizing a theme

Column
width240px

On this page:

Table of Contents
maxLevel1

 

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.) 

...

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

Info

Control widths are ignored on the iPhone and the iPad even if the designer has explicitly specified them.

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.

...

Radio and Checkbox controls have an extra property called Option Width. This property is useful when you 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%.

...

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 can type 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.

...

Tip

Internet Explorer 8 will not display the borders of a section in use mode if the required property has been checked and then unchecked in the designer for a control inside the section. The border-style in the Style Tab of the section changes to None.  Edit the form and change the border-style of the section to solid to display the borders.

 

Label Color and Label Size

...

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 XHMTL XHTML in the control’s label property field. For instance, use XHMTL XHTML if you want to apply two different font colors inside the same label. Typing XMHTL 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.

...