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 [[V4_Customizing_Themes | customizing a theme]]. 

Column
width240px

On This Page:

Table of Contents
maxLevel1

 

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

...

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

Background Color 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 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.

...

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.

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

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

Italic Italic

Check this checkbox to italicize the control’s label.

...