The NGClient a powerful mechanism to style solutions.
All possible CSS properties can now be used
All types of selectors
Pseudo-classes
In This Chapter
Solution StyleSheet
Stored in media folder, use images from media library using relative URL's
Converting Existing StyleSheets
Font Size Conversion
For the existing Servoy Clients, all font-size values specified in CSS are converted to a different value before being used.
var fontSize = '10px' function convertSize(fontSize) { var units = fontSize.match(/(^\d.)(\w.$)/) if (units.length === 2 && units[1] === 'px') { if (units[0] === 9) { return '11px' } return (units[0] * (4 / 3)) + 'px' } else if (units.length === 1 || (units.length === 2 && units[1] === 'pt')) { if (units[0] === 9) { return '7pt' } return (units[0] * (3 / 4)) + 'pt' } return fontSize }
CSS Selectors Conversion
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 | button[svy-model] |
check | |
combobox | |
even | .ngRow.even |
field | |
footer | [ng-style="footerStyle"] |
form | [svy-formstyle] |
header | [ng-style="headerStyle"] |
label | |
listbox | select[svy-model][size] |
odd | .ngRow.odd |
portal | |
radio | |
selected | .ngRow.selected |
grid_header | |
spinner | |
tabpanel | |
title_header | [ng-style="titleheaderStyle"] |
title_footer | N/A |