How can I dynamically size UI elements?

I come from an HTML/CSS background, where if you have elements that line-break, the elements below typically move down to make room, and a scroll bar accounts for overflow. I am over-simplifying, but I am wondering if something similar is possible in Touch?

I am hoping to make some sections in a UI which will contain an arbitrary number of children. In the 3rd ‘row’ here, you can see that the 3rd line of buttons is cut off:

Is there a way to just make the buttons’ parent element expand vertically to make room for an arbitrary number of buttons? And if the top level panel doesn’t fit into the window, introduce a scrollbar? So far, the tutorials I’ve watched seem to all use static vertical sizing.

If it’s possible to have vertically dynamic panels, I’m hoping to just get a nudge in the right direction.

quick example attached, drag 'n drop the tox file into your TD window to see it.

notice slider_container has its Horizontal mode set to Fill, and its Vertical mode is set to Fixed Height
notice buttons_container has it Vertical Mode set to Fill, and also its Vertical Scrollbar set to Automatic
Currently buttons_container has 30 buttons, but if you go into buttons_container and set the Number of replicants parameter on replicator1 to 5 and zoom out again, you’ll see its size has changed.

ui_fill_example.tox (3.4 KB)

Also see the OP Snippets, open its Container COMP examples

1 Like

Thank you so much, this gives me what I need. I didn’t think to look for a scrollbar under Children if it didn’t exist under Layout.

Sometimes you watch so many tutorials that you forget to just look around the Parameter pages…