...
| Table of Contents | ||
|---|---|---|
|
Changing Changing Your Form’s Background Color
...
| Code Block |
|---|
/******** Hide Tab in Print View ******/
/* Tab label */
.s-print .h-switch .h-case .f-label {
display:none;
}
/* The entire tab group contents */
.s-print .c-switch {
border: none;
}
/* A tab header */
.s-print .f-switch .h-case {
border: none;
} |
Disable Expanded/
...
Collapse
In this example we want to disable the expand/collapse functionality on section controls.
...
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.
...
| Code Block |
|---|
/***** Very Tight Controls *****************
1. Use for Grids for row 2-n
*/
.f-form .row2-n .ie-date-time-hr,
.f-form .row2-n .f-help,
.f-form .row2-n .f-required,
.f-form .row2-n .f-calendar,
.f-form .row2-n .f-label label {
display:none !important;
}
.l-control-vertical .row2-n.f-input,
.l-control-vertical .row2-n.f-output,
.l-control-vertical .row2-n.f-textarea,
.l-control-vertical .row2-n.f-select,
.l-control-vertical .row2-n.f-select1,
.l-control-vertical .row2-n.f-upload,
.l-control-vertical .row2-n.f-trigger {
clear:both; padding:0px !important; } .l-width-custom .f-panel .f-input input, .l-width-custom .f-panel .f-textarea textarea { width: 97% !important; height: 17px !important; } .l-width-custom .f-panel .f-select1 .select { width: 100% !important; } .row2-n.f-select1 fieldset, .row2-n.f-select fieldset { padding:0px !important; } /* .row2-n.f-textarea textarea { overflow:hidden; } */ /* remove space around sections with repeat used in grids */ .row2-n .c-section, .row2-n .h-section { padding: 0px !important; border-bottom: 0px !important; } .row2-n.f-section { margin: 0px !important; } .f-form .row2-n .f-add, .f-form .row2-n .f-remove { float: left !important; } .row2-n.s-expanded .f-expand { display: none; } |
...