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