Responsive forms - Default classes
Control |
Class name |
DOM element |
Dependency |
Description |
| All | eFormItem | Default class for each type of element inside the form. | ||
| All | eFormInvalid | Element is marked by this class If form control resulted from validation as invalid. | ||
| TextBlock | eFormTextBlock | SPAN | ||
| TextBox | eFormTextBox | INPUT[TYPE="TEXT"] | ||
| TEXTAREA | FontSize * 2 <= height | |||
| Masked TextBox | eFormMaskedTextBox | INPUT[TYPE="TEXT"] | ||
| TEXTAREA | FontSize * 2 <= height | |||
| DatePicker | eFormDate | INPUT[TYPE="TEXT"] | ||
| eFormDateTrigger | DIV | Trigger "icon" for the calendar. | ||
| ComboBox | eFormCombo | SELECT | ||
|
|
INPUT & DATALIST | IsEditable = true | Filterable ComboBox. | |
| ListBox | eFormList | SELECT[MULTIPLE="TRUE"] | ||
| Button | eFormButton | INPUT[TYPE="BUTTON"] | ||
| Attachment | eFormAttcOuterContainer | DIV | Main attachment container | |
| eFormAttcLabel | LABEL | Atachment label | ||
| eFormAttcContainer | DIV | Attachment cointainer for items | ||
| eFormAttcSubmit | INPUT[TYPE="BUTTON"] | Add new attachment button | ||
| - Attachment item | eFormAttcItem | DIV | Main container of the Attachment item. | |
| eFormAttcItemIco | DIV | Display item's icon. Type of icon can be set by element's icoType attribute | ||
| eFormAttcItemLabel | DIV | Label of the attachment item | ||
| eFormAttcItemRmv | DIV | ReadOnly = false | Remove button | |
| Image | eFormImg | IMAGE | ||
| CheckBox | eFormCheckBox | INPUT[TYPE="CHECKBOX"] | ||
| RadioButton | eFormRadio | INPUT[TYPE="RADIO"] | ||
| Container(DIV) | eFormContainer | DIV | Top container in the DOM tree | |
| eFormInnerContainer | DIV | Container inside another container | ||
| Rectangle | eFormRectangle | DIV | This control cannot hold any controls inside itself. Good for "lines" | |
| GRID | eFormGridContainer | DIV | ||
| eFormGrid | TABLE | |||
| THEAD | ||||
| TBODY | ||||
| eFormGridHover | TR:HOVER | When grid row triggers :hover | ||
| eFormGridSortContainer | DIV | This container holds elements for grid sort function | ||
| eFormGridSortAsc | DIV | Element that triggers ascending sort. | ||
| eFormGridSortDesc | DIV | Element that triggers descending sort. |
Result codes:
//TextBlock <span class="eFormTextBlock eFormItem" id="TextBlock1formHolder" dir="ltr" tabindex="9007199254740991" style="width: 103px; height: 16px; font-family: Arial;">Test</span> //TextBox <input type="text" placeholder="" class="eFormTextBox eFormItem eFormInvalid" id="NDTextBox1formHolder" dir="ltr" tabindex="2147483647" style="width: 120px; background: rgb(255, 255, 255); font-family: "Segoe UI"; font-weight: normal; font-style: normal; font-size: 12px; color: rgb(0, 0, 0);"> //TextBox Area <textarea placeholder="" class="eFormTextBox eFormItem" id="TextBox3formHolder" dir="ltr" tabindex="2147483647" style="width: 153px; height: 27px; background: rgb(255, 255, 255); font-family: Arial; font-weight: normal; font-style: normal; font-size: 13.3333px; color: rgb(0, 0, 0);"></textarea> //Masked TextBox <input type="text" placeholder="" class="eFormMaskedTextBox eFormItem eFormInvalid" id="NDTextBox1formHolder" dir="ltr" tabindex="2147483647" style="width: 120px; background: rgb(255, 255, 255); font-family: "Segoe UI"; font-weight: normal; font-style: normal; font-size: 12px; color: rgb(0, 0, 0);"> //Masked TextBox Area <textarea placeholder="" class="eFormMaskedTextBox eFormItem" id="TextBox3formHolder" dir="ltr" tabindex="2147483647" style="width: 153px; height: 27px; background: rgb(255, 255, 255); font-family: Arial; font-weight: normal; font-style: normal; font-size: 13.3333px; color: rgb(0, 0, 0);"></textarea>