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

Rating

Popularity

<100

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

Vaadin Responsive - Vaadin Add-on Directory

Vaadin Responsive provides any component or UI the ability to respond to changes in their size using CSS, much like CSS media queries do. Vaadin Responsive - Vaadin Add-on Directory
**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.
Online Demo
Issue Tracker
Source Code

Vaadin Responsive version 1.0.0.alpha1
First preview release. Supports width and height ranges on the client side.

Vaadin Responsive version 1.0.0.alpha3
Now containing the actual bugfixes (EGit gave me a bit of a hard time, so alpha2 didn't actually contain any changes). See issue tracker for details.

Vaadin Responsive version 1.0.0.alpha4
Bugfixes for IE8. See issue tracker for details.

Online