Layout question

[mikey]

i’m messing with this early beta (0.10.13), trying to understand layout, better.
i’m modifying the weather app. i’m trying to add a reload widget (button/icon/image/etc.) to put next to the capitals selectbox, at the top of the page.
i think i’ve settled on using a stylebox (within a stylebox) to do this (but only because none of the other components seem to be appropriate, and 4d’s examples seem to use styleboxes for this sort of task (maybe that’s how you get a flexbox to work in qoda?), but i’m also trying to make sure i set this up so that it can be responsive.

i want to have padding between the selectbox and the widget, and i want to be able to set up controls for how the resize will be handled.
here’s what it looks like, after futzing with it for quite a while:

[mathieu.ferry]

Hi Mikey,

If I understand well your need, you’re pretty close to it.
You’re right, you have to use styleboxes to organize components on the webform.

First step is ti put the capitals selectbox & your button in a stylebox. Use flex controls to center everything:

To add padding between the selectbox and your button, you can use the gap setting of the container stylebox:

To make is more responsive, use the wrap setting, to make the button go under the selectbox when resizing the window:

To refresh the data, setup the onClick event of the button:

Hope it’s all ok for you!

[mikey]

followup:
i laid out the stylebox, and set it up like this (note the size of the controls and the gap between them in studio)

but when i fire up the demo, the gap looks like this (note the gap between the controls):

[mathieu.ferry]

Well if you have properly saved your webform, layout should be the same in and out studio.
Check you saved it and. fire the demo again.

[mikey]

i did.
save all is dimmed.

[mathieu.ferry]

I sent you a PM to explain you how to share your sandbox with me