This section is a quick reference list of the most common types of HTML controls and their corresponding CSS class tags. The typical controls and the corresponding CSS classes used in a JSP file are listed in the following table.
Control and Tag | Available Classes | Description |
---|---|---|
Buttons | button | For all buttons. |
Checkboxes | checkboxcolumn | For checkboxes displayed in a column of a table. |
checkboxheader | For checkboxes displayed in the header of a table. Use this class at the <td> cell level, not the <input> tag level. | |
Comboboxes/ Selects | combobox | For all combo boxes. |
Icons | columnicon | For icons in a table column. |
icon | For icons not in a table column. | |
lookupicon | For lookup icons appearing to the right of certain editable input texts. | |
Input Boxes | dateinput | For editable date input. |
numericprotectedinput | For non-editable numeric input. Right-aligned. Surrounding <td> tag should have class="protectednumber". | |
numericunprotectedinput | For editable numeric input. Right-aligned. | |
protectedinput | For non-editable input. Surrounding <td> tag should have class="protectedtext". | |
unprotectedinput | For editable input. | |
Labels | N/A | Takes the same font as specified by the table class in which it resides. Use detail labels for a detail view and search labels for a search view. |
Radio Buttons | radiobutton | For all radio buttons. |
Tables (non-tabular data) | view | For detail views. This class is attached to view.htc, which dynamically sets column widths when the HTML page loads. |
Tables (tabular data) | table | For all tables of the tabular data type. Specify
the following attributes for the table element:
The heading row must be included in a <thead> tag.
Heading cells must be in <td> tag and not the <th> tag.
The body rows must be included in a <tbody> tag. If the table
is an editable list that permits add, specify a template row in a <tfoot>
tag. Specify the following attributes for the template row <tr>
tag:
|
Text | numerictablecolumn | For displaying text in a table column. Right-aligned. |
protectednumber | For displaying numeric data. Right-aligned. | |
protectedtext | For displaying text. | |
searchcriteriacell | For the bottom <td> tag of each search criteria. Note: All <td> tags using class as searchcriteriacell
must specify nowrap="true". This prevents the lookup icon from wrapping
to the next line when used with text boxes, input boxes, and query
combo boxes.
|
|
tablecolumn | For displaying non-editable text in a table column. | |
tablecolumnheader | For displaying text in a table column header. | |
Textarea | textarea | For keeping text areas consistent. See also getTextAreaOptions(). |
Total fields | totaltext | Shows text in a different color to identify a total field. |