Servoy 2020 Documentation
Child pages
  • Styling in the NGClient
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 16 Next »

The NGClient utilizes unprocessed CSS (3.0) to do all styling of solutions.

All possible CSS properties can now be used, like:

  • All types of selectors
  • Pseudo-classes

 

Solution StyleSheet

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.

CSS Selectors

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 SelectorNGClient Selector

body

[ng-style="bodyStyle"]
buttonbutton[svy-model]
check 
combobox 
even.ngRow.even
field 
footer[ng-style="footerStyle"]
form[svy-formstyle]
header[ng-style="headerStyle"]
label 
listboxselect[svy-model][size]
odd.ngRow.odd
portal 
radio 
selected.ngRow.selected
grid_header 
spinner 
tabpanel 
title_header[ng-style="titleheaderStyle"]
title_footerN/A

 

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...). If you set another value for styleClass property this default value will not be present anymore and must be specified among styleClass values (as this should be already present in solution css, otherwise has no effect).

  • No labels