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 14 Next »

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

 

Multiple classnames

Browser Specific CSS Syntax

  • No labels