Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

ThemeManyComments.png

 

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;
}

...