The NGClient utilizes unprocessed CSS (3.0) to do all styling of solutions.
All possible CSS properties can now be used, like:
The stylesheet can be specified at solution level, it has to be stored in the media, for usage of images from media library do use relative URL's.
StyleSheets for the Servoy Smart and Web Client could make use of Servoy specific type selectors. In the NGClient, where the stylesheets are interpreted by the browser, these Servoy specific type selectors are not available. Below a conversion table from the Servoy specific type selectors to their NGClient equivalent.
Smart/Web Client Type Selector | NGClient Selector |
---|---|
body | [ng-style="bodyStyle"] |
button | .svy-button |
calendar | .svy-calendar |
check | .svy-check |
checkgroup | .svy-checkgroup |
htmlarea | .svy-htmlarea |
htmlview | .svy-htmlview |
imagemedia | .svy-mediafield |
combobox | .svy-combobox |
even | .ui-grid-row:nth-child(even) .ui-grid-cell |
field | .svy-field |
footer | [ng-style="footerStyle"] |
form | [svy-formstyle] |
header | [ng-style="headerStyle"] |
label | .svy-label |
listbox | .svy-listbox |
odd | .ui-grid-row:nth-child(odd) .ui-grid-cell |
password | .svy-password |
portal | .svy-portal |
radio | .svy-radio |
radiogroup | .svy-radiogroup |
slider | .svy-slider |
spinner | .svy-spinner |
splitpane | .svy-splitpane |
tabpanel | .svy-tabpanel |
textarea | .svy-textarea |
textfield | .svy-textfield |
typeahead | .svy-typeahead |
selected | .ui-grid-row-selected div.ui-grid-cell (you have to use !important to override selected background color) |
grid_header | .ui-grid-header-cell |
grid_viewport | .ui-grid-header-viewport |
title_header | [ng-style="titleheaderStyle"] |
title_footer | N/A |
The grid is based on UI-grid. there is a customizer that creates a stylesheet: http://ui-grid.info/customizer/#
Also NGClient will output special classes for default components that can be used from solution css to easily style all components of same time. The name of the class is svy-componentName (so svy-label, svy-button, svy-calendar, svy-textfield...).
In NGClient, Sevoy specific selectors such as:
label.bold { font-weight: bold; } |
should become
.bold { font-weight: bold; } |
If there are cases where the bold class is defined for two different components and their implementation is also different, then the following example
label.bold { font-weight: bold; } field.bold { font-weight: 900; } |
should become
.label_bold { font-weight: bold; } .field_bold { font-weight: 900; } |
After that, the styleClass property of the elements should be changed from "bold" to "label_bold" or "field_bold".
The "margin" css property should be changed with the "padding" property.
label { margin: 1px 2px 3px 4px; } |
should become
.label { padding: 1px 2px 3px 4px; } |
In the webclient, the font-size property is changed at runtime, so in order to keep the same runtime sizes in the NGClient, the css files should be updated using the following functions:
ngclient_value = 3/4 * webclient_value
ngclient_value = 4/3 * webclient_value
For example:
field.label { font-size: 20pt; } field.textfield { font-size: 20px; } |
should become
.label { font-size: 15pt; } .textfield { font-size: 26px; } |
In NGClient it is recomended that style classes that are used in the styleClass property of form elements should be added at the end of the css file. This way, if a style class (named myTextfield) has properties that override properties from .svy-textfield, then setting that class as the styleClass property will have the expected outcome. This is because myTextfield is located after .svy-textfield in the css file.