Directory

← Back

CSS Tools

CSS and style utilities for both server and client side.

Author

Rating

Popularity

<100

CSS and style utilities for both server and client side.

On the server-side:

Use the RenderInfo.get method to get accurate runtime style information for any component currently attached to the application, such as the exact pixel size and position or color and font-size.

On the client-side (GWT):

Use ComputedStyle to get accurate runtime CSS property values from DOM elements, which are normalized for all supported browsers, e.g. you get all dimension values as pixels even if they would be defined as percentages in the stylesheet.

Use CSSRule to get actual CSS property values defined in the stylesheets, i.e. the exact values the author has written in the stylesheet.

You can also create new style rules dynamically using the CSSRule class. This allows you to easy specify some CSS styles for your custom widgets, but also enables the widget users to override any of those values using simple CSS, since your styles are not defined as hard-to-override inline styles.

Sample code

// Gets the computed style for the given element. Re-use the reference as much as possible.
ComputedStyle cs = new ComputedStyle(getElement());

// Gets the raw string value of a property
String width = cs.getProperty("width"); // Returns for instance "123px"

// Get the  integer value of a pixel based property
int width = cs.getIntProperty("width"); // Returns for instance 123
CSSRule myRule = CSSRule.create(".new-selector");
myRule.setProperty("color", "red");
myRule.setProperty("fontWeight", "bold");
RenderInfo.get(component, new Callback() {
	public void infoReceived(RenderInfo info) {
		// Use the info
		// All the properties are returned as Strings, e.g. "123px"
		String width = info.getProperty(CssProperty.width);
	}
});

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Added the RenderInfo class making it possible to query runtime style properties for any component attached to the application.

Released
2011-10-21
Maturity
STABLE
License
Apache License 2.0

Compatibility

Framework
Vaadin 6.3+
Browser
Internet Explorer
Internet Explorer
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser

CSS Tools - Vaadin Add-on Directory

CSS and style utilities for both server and client side. CSS Tools - Vaadin Add-on Directory
CSS and style utilities for both server and client side. On the server-side: Use the RenderInfo.get method to get accurate runtime style information for any component currently attached to the application, such as the exact pixel size and position or color and font-size. On the client-side (GWT): Use ComputedStyle to get accurate runtime CSS property values from DOM elements, which are normalized for all supported browsers, e.g. you get all dimension values as pixels even if they would be defined as percentages in the stylesheet. Use CSSRule to get actual CSS property values defined in the stylesheets, i.e. the exact values the author has written in the stylesheet. You can also create new style rules dynamically using the CSSRule class. This allows you to easy specify some CSS styles for your custom widgets, but also enables the widget users to override any of those values using simple CSS, since your styles are not defined as hard-to-override inline styles.
Online