Directory

← Back

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.

Author

Contributors

Rating

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 */
}

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

Bugfixes for IE8. See issue tracker for details.

Released
2013-10-11
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0
Vaadin 7.1
Vaadin 7.0+ in 1.0.0.alpha3
Browser
Internet Explorer
Firefox
Opera
Safari
Google Chrome
Internet Explorer
iOS Browser
Android Browser
Internet Explorer
Online