...
Sometimes you require a separate comment input for each selected checkbox. This theme changes the required indicator from a red asterisk to a red left-hand bar and only displays the comment if the associated checkbox is selected. Otherwise the comment input remains hidden and not required. The latter behavior is created via a custom rule shown in in the Many Checkbox Comments rule sample. Download a working sample form here. Note that the CompactCommentsSample.zip must be extracted and contains both the form and the completed theme. You can also Try this form now.
...
| Code Block |
|---|
/** Change required indicator from asterisk to bar **/
.f-form .compact .f-required {
display:none;
}
.compact.s-invalid {
border-left: 3px solid red;
}
/** reduce white space so comment input aligns with checkboxes **/
.l-control-vertical .compact.f-input,
.l-control-vertical .compact.f-output,
.l-control-vertical .compact.f-textarea,
.l-control-vertical .compact.f-select,
.l-control-vertical .compact.f-select1,
.l-control-vertical .compact.f-upload,
.l-control-vertical .compact.f-trigger {
padding: 1px;
margin: 1px;
}
.l-control-vertical .compact .f-select-item {
margin: 2px 0px 2px 0px;
}
.compact.f-select fieldset,
.compact.f-select1 fieldset {
padding: 0px;
margin: 0px;
}
/** Invisible comment inputs must takes up space on form
so they align with the associated checkbox **/
.compact.s-invisible {
visibility:hidden;
display:block;
}
/** Reverse above so comment inputs are visible in designer **/
.s-edit .compact.s-invisible {
visibility:visible;
display:block;
} |
...
Tables and Grids
Using a table/grid layout is a useful space saving technique. This layout resembles a Microsoft excel worksheet. The table control makes table/grid form layout easy.
...