You can define a device-specific layout for a menu or form-control. For example, to apply a different design for a button or to apply a different font.
For such a layout, a specific CSS class is required in the relevant style sheet file. To be able to use such a specific CSS class, in Mobility studio, set up a reference to the CSS class in the style sheet. You can link this CSS class reference to the relevant form control to get the required layout.
For several application components, a default CSS class reference is pre-defined. These CSS class references are automatically added when you add a component of the related type to an application:
- Button
- CheckBox
- GridView
- Label
- TextBox
- Caption
- MenuButton
- FormTitle
- DropDown
Standard procedure
| 1. |
Click Mobility management. |
| 2. |
Click CSS classes. |
| 3. |
Click New. |
| 4. |
In the CSS class ID field, type a value. |
| 5. |
In the CSS class field, type a value. |
| |
Note: Make sure, this CSS class name matches exactly the related CSS class name in the style sheet file.
|
| 6. |
Close the page. |
| 7. |
Close the page. |
Notes
The CSS class that you define for the data grid is also used to determine which CSS class is to be used for the components of the data grid. For example, the highlighted row or the button bar. These grid-related CSS classes are not added to the CSS classes in Mobility Studio but must be available in the CSS file.
For these data grid components, the CSS class is determined based on the CSS class as defined for the data grid (between brackets, an example with the default 'GridView' CSS class):
- Grid component - [CSSClassName] - (GridView)
- DIV surrounding grid - [CSSClassName]EnclosingDiv - (GridViewEnclosingDiv)
- Grid header - [CSSClassName]HeaderStyle - (GridViewHeaderStyle)
- Grid row - [CSSClassName]RowStyle - (GridViewRowStyle)
- Alternating row - [CSSClassName]AlternatingRowStyle - (GridViewAlternatingRowStyle)
- Selected row - [CSSClassName]SelectedRowStyle - (GridViewSelectedRowStyle)
- Pager (button bar) - [CSSClassName]PagerStyle - (GridViewPagerStyle)