| Section | ||
|---|---|---|
|
...
|
...
|
...
...
|
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 |Panels]] and [[#Tabs | Tabs]] for 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, frevvo 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.
| 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.
See this image as an example:[[
image:itemwidth.png]]
Option Width
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%.
Here is an example of a checkbox option that spans multiple lines:
[[image:optionWidth-before.png]]
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:
[[image:optionWidth-80%.png]]
Margin and Padding
...
In this example below, the controls have margin and padding properties of 30 px (pixels).
[[Image:MarginVSpadding.png]]
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.
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. Border style changes may not be visible if a Border Width is not specified.
| 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 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 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.
Bold Bold
Check this checkbox to make the control's label bold.
Italic Italic
Check this checkbox to italicize the control’s label.
...