Best practice needed: "Responsive Design" based on SmartGWT HLayout / VLayout

[Blama]

Hello Isomorphic,

I'm looking for the suggested approach for this use case:

I have a HLayout as main element with three SectionsStacks with inner Layouts (HLayout and VLayout). These Layouts have a fixed width and height.
Currently, when resizing the browser window (or using a smaller resolution, the content is clipped. I most likely could change it to have a Scrollbar instead.

But what I would like to have is a "responsive layout" (at least it should look this way), so that I can say:
- "If the available width is less than x, switch the main HLayout to a VLayout with 2 HLayouts and have the three inner Layouts in '2 rows'."
- "If the available width is even less than y, switch the main HLayout to a VLayout have the three inner Layouts in '3 rows'."
- "If the available width increases, change the positioning again."

This does not corresponded to you Responsive Design showcase sample, but will be done with Event Handlers instead, I suppose.
Is that correct? Is there a best practice for this, eg. "Have all the needed Layouts ready and show()n, just call addMembers() and removeMembers() in the handler(s)"?

Thank you and best regards,
Blama

[Isomorphic]

The correct approach for something like this would generally be to have a ResizedHandler that rearranges the components into different sub-layouts whenever the main layout is resized.

There's too little detail to tell in this case, but be aware that when talking about whole-screen layouts rearranging themselves as you describe, it's very easy for an attempt at "Responsive Design" to be less usable than just having an ordinary scrollbar, or less usable than controls that allow the user to rearrange the screen themselves as they see fit.