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.

In the Solution Explorer Tree you can just create a new file (xxxx.css) in your media folder of your solution. Which can then be assigned with the stylesheet property of the solution node itself.

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. 

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

Grid

The grid is based on UI-grid, there is a customizer that creates a stylesheet.

Tabpanel

Tabpanel is based on Bootstrap nav-tabs. To target the tabs, the following classes are available:

Changes from previous version

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

font-size

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:

for sizes specified in pt:

ngclient_value =  3/4 * webclient_value

for sizes specified in px:

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

styleClass precedence over default servoy selectors (.svy-field, .svy-combobox, .svy-textfield, etc...)

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.

Using media file from css

In NGClient the css files are not being pre-processed on server, so using background-image: url("media:///<name>") does not work out of the box. However, using background-image: url("mymedia.gif") will work fine, if mymedia.gif exists in media files. 

Labelfor label in tableview

In WebClient and Smart Client you could use a labelfor label in order to style the table header. In NGClient, only text property and styleClass properties are applied. Using styleClass, you can style the header from solution css (so define border, background-color, background-image ..). For example, if the labelfor label has imageMediaID set to an icon settings.png (media). In NGClient, you should add a styleClass settingsBackground then add in solution css:

.settingsBackground
{
 background-image: url("settings.png");
 background-repeat: no-repeat;
 background-position: center;
 background-size: 16px;
}

Loading indicator 

By default NGClient will set the wait cursor on the body and all its elements when a request to the server is done. This is done through the service: $sabloLoadingIndicator which can also be used by 3th party services (plugins) that want to set there own wait cursor. The service has 2 functions:

1> showLoading(): Call this when the loading indicator should show.

2> hideLoading(): Call this when the loading indicator should be hidden.

A call too showLoading() should always be in sync with a call to hideLoading() else the internal state will be wrong.

If you want to control what should be done when show/hide is called, so showing your own kind of loading (maybe a div) then you can add your own service with the name "loadingIndicator". This service should have those 2 functions, don't use this service directly to set or hide the indicator, always use the $sabloLoadingIndicator.

yourmodule.factory("loadingIndicator",function($window) 
{
	return {
		showLoading: function() {
			$($window.document.body).css({"cursor":"wait"});
		},
		hideLoading: function() {
			$($window.document.body).css({"cursor":"auto"});
		},
	}
})

File upload

The fileupload dialog uses the following keys for presenting its string values:

"servoy.filechooser.button.upload"

"servoy.filechooser.upload.addMoreFiles"

"servoy.filechooser.selected.files"

"servoy.filechooser.nothing.selected"

"servoy.filechooser.button.remove"

"servoy.filechooser.label.name"

"servoy.button.cancel"