Vaadin Responsive

Vaadin Responsive provides any component or UI the ability to respond to changes in their size using CSS, much like CSS media queries do.

NOTE, core Vaadin has a built in version of this utility since 7.2.

Vaadin Responsive is an extension which provides any component or UI the ability to respond to changes in their size using CSS.

It provides similar functionality as CSS media queries do, but also it works in IE8 and you can respond to size changes on a component level, not just on a viewport level.

Sample code

// Vaadin UI
protected void init(VaadinRequest request) {
   new Responsive(this);
}


// CSS
.v-ui[width-range~="0-800px"] {
    /* Styles that apply when the UI's width is between 0 and 800 pixels */
}
    
.v-ui[width-range~="801px-"] {
    /* Styles that apply when the UI's width is over 800 pixels */
}

Links

• Online Demo
• Issue Tracker
• Source Code

Compatibility