Vaadin Responsive add-on

Post any comments, suggestions, ideas, issues/bugs on this thread about the
Vaadin Responsive add-on

Read the blog post about the release:
Responsive design

Nice add-on, a first step toward responsive design.
What we need is also the option to replace elements based on content-sizes.

For example when we have a horizontal menu with 10 items in it.
On a 20" display we would like to show it on one line,
On a 13" display we would like to show it as two lines (Can be done now via width)
On a 5" display we would to replace it via a drop-down or popup menu

For example here:
When you make the browser screen smaller at one time the menu items on the right are changed in a popup menu on the left side. (Typical smartphone navigation style)

I wonder if we should trigger events when the screen size changes on certain boundaries,
or if we conditionally could hide/display elements based on the browser size.

Hi André,

Somewhat late with my reply (sigh), but yeah, that is something I had in mind for the next version. So basically an event should be sent to the server everytime a width/height range is matched in the client. That way you could change the contents according to a specific with.

I made an enhancement ticket about this feature:

Hello Jouni,
I have doubt related to the responsive layout, I just tried with a HorizontalLayout instead of Label used in the demo “”. And it seems to be fine with just HorizontalLayout, but as our requirement I just tried with Label + TextField in the horizontal layout, and tried with the Expand Ratio with that. But it seems to be not working fine ! Can you please tell whether it’s possible to use expand ration here?

Hi Jouni,

Since Responsive extension is now part of Vaadin 7, I posted info about an issue in the Vaadin 7 forum:!/thread/8417250

Let me know if you prefer to have the discussion in this thread instead.

What André Schild is asking for has been traditionally (bootstrap, etc.) done via hiding / showing components depending on screen sizes, so this functionality could be theoretically already accomplished with Responsive.