...
All control widths are specified in columns. The width is selected by clicking on a grid in the style tab. When you drag and drop most controls from the palette on to the canvas, the control will be 12 columns wide. The trigger, link and panel controls are the exception - the default widths of the trigger and link controls is 3 columns while the panel is 6. To change the width, simply click the number of divisions on the grid to specify how wide you want the control to be. For example, a text control dropped on the canvas from the palette has a width of 12 columns as shown in the image:
To make this control 6 columns wide, click on the 6th division of the grid. The results are shown in the image:
When you make a control N columns wide (e.g. 6), the entire control takes up 6 columns. As a result, if there is space, controls will float up next to other controls. You can prevent this using the New Line.property.
...
Here are some important facts to know when working with control widths:
...
- When you drag a panel from the palette and drop it on the canvas, the default width is 6 grid columns. Panels can be made as wide as 12 columns. Each panel is itself divided into 12 columns irrespective of its width.
- Panels do not take up visible use mode space i.e. a 6 column control outside a panel and a 12-column control inside a 6-column panel take up exactly the same width. You can edit the Width property of controls you drag inside these controls.
- There is no Width property for sections or tables controls - they are always 12 columns wide. Each is itself divided into 12 columns. They are all exactly as wide as a regular 12 column control. An N-column control that is inside one of these will appear narrower than the corresponding N-column control outside.
- Repeats are also always 12 columns wide and each repeat is itself divided into 12 columns. Like panels, they take up no visible use mode space: a 12-column control outside a repeat and a 12-column control inside a repeat are exactly the same width.
- The total visible width of a date/time control with N columns is the same as the total visible width of any other control with N columns. The relative widths are constant so the space between the two reduces as the total number of columns reduces.
- 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.) 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. |
| Warning |
IE8 does not support the CSS3 calc() function. The width of a Section control is set to 98%. If you have a Section inside a Panel that has fewer columns in your form, the right edge does not align. |
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. The Item Width can be entered in % or px values.
Show/Hide Item Labels
Check this property to show/hide the Item labels for Radio and Checkbox controls. If checked, the item labels are not visible but they still take up space on the screen. Item Labels in a table do not take up screen space.
Background Color
...
The center property only applies to the Message control. Checking this, will center the message text. It works best with None and Bordered message types.
Expand/Collapse
This property applies only to the Section control. When you drag a section control from the palette and drop it onto the designer canvas, the expand/collapse icon will be visible and the Expand/Collapse checkbox will be checked. Uncheck this to hide the icon.
| Info |
|---|
Click the |
Date Picker
To display the date picker, check the checkbox on the Style Property panel. If checked, you will see the date picker inside the the date control and the date portion of the date/time input control.
...
The New Line Property will be present for all controls that have the 12 column width selector. Check New Line and the control always appears on a new line. For example: Let's say you have First Name and Last Name controls side by side in your form.
If you want the Last Name control to be positioned under the First Name, check the New Line property.
Trigger and Link controls have this property checked by default.
...
The following properties are no longer supported in : border style, width, color, margins, padding and option width for Radio and Checkbox controls.