Nested Responsive Components (don't work as they should)

Vaadin 6 / 7 / 8
1

Hi,

The wiki page at
https://vaadin.com/wiki/-/wiki/Main/Responsive+layouts+using+the+Responsive+extension
 has this paragraph:

"
The Responsive extension is different from regular CSS media queries in the way that you can write the ranges without caring about the context where the component is going to be placed in. Where regular media queries only allow you to target the viewport width and height, with the Responsive extension you can target the individual elements you care about, and let them react to the context they are placed in
."

This seemed exciting to me because I thought it would enable me to e.g. have a responsive root layout that determines whether 2 sections are shown next to each other or underneath each other, and then within each section also have a responsive layout where e.g. the number of columns depends on the width. That way the responsiveness of the root layout would have a cascading effect on the layout of the sections because when the root layout would switch to ‘vertical’, it would have an effect on the width of the sections, which would have their number of columns adjusted as needed. Cool!

However, the problem here is that components that are made responive need not only a relative width/height (which is logical since a fixed one would never change the range it falls in), they also need to have this relative width/height specified
at the server side
!. As a result, the responsive root layout can’t change the section layouts width from 50% to 100%. This is really not logical: CSSLayout allows its contents to use pure CSS for positioning/layout, and the Responsive extension relies on CSS, so why would 2 nested responsive CSSLayouts both need their size specified in java code instead of CSS?

Would it be possible to fix this? Or is there a workaround?
Also, I think documentation should be updated to mention that currently the responsive components, even when used inside a CSSLayout, must have a relative width set in java code, which can’t be overridden by CSS.

Thanks
Herman Bovens

2

Hi Herman,

There is some issue with the LayoutManager in the Vaadin client side which fails to trigger element resize events for widgets that don’t have a size set on the server.

So as you said, a undefined wide CssLayout should behave just like a normal DIV (once set to display: block) and trigger resize events.

As a workaround, set the width on the server to 100%, and then set the width in the breakpoints/width-ranges using !important, which will override the inline style.

I’ll investigate a little bit about the LayoutManager issue, and create a ticket about it.

3

Thanks for the workaround, I’ll try it out as soon as possible.

I’m not even sure the CssLayout should have to be set to display: block to trigger resize events (if you want to display in columns / a grid you sometimes want it to be inline-block).

For this issue (nested Responsive layouts failing) I had already created ticket
#14917
 but if there is a specific issue with the LayoutManager maybe a separate ticket is needed, I’ll let you decide.

4

Thanks! I created a more detailed ticket about the issue with a test case:
http://dev.vaadin.com/ticket/14923

5

Well, it’s been 3 years now and both bugs are still open…

6

True. I don’t know how bugs are prioritized (other than votes by paying customers), but it seems responsive layouts are not getting enough attention.

I can’t believe other people don’t encounter this problem. I guess they just try nesting responsive layouts, see that it doesn’t work well, and forget about the idea.

The workaround does work, though (ugly as it may be), and I feel nested responsive layouts are quite powerful.