Add children from bottom-up instead of top-down

I want to add children to a vertical box from bottom-up instead of the default top-down. I’d assume this is pretty easy and simple, that’s why I’m keeping this post short. Thanks for reading!

  • Nick

It is fairly easy and simple but nowhere nearly intuitive enough and there is no standard way of doing it. Instead of adding children to a vertical box, insert them into an array at index 0. Once the array is ready, loop and add them to the vertical box. And yeah, you’ll need to Clear and repopulate the list every time you add an item.

I’ve seen people trying to do it a number of times (including myself), maybe it’s a feature request worthy topic.

edit: Also, here’s something stupid that works surprisingly well (no additional array needed):

Rotate the vertical box upside down (angle 180), when you add a widget to the list, set its angle to 180, too.

1 Like

Thank you for the quick reply! I tried your second method because it seemed much simpler and I was able to achieve what I was looking for. Thanks!

Some little addition:
If the first solution is used with items that have size calculated dynamically (e.g. multiline text) then there can be some blinkings on inserting new items.
If the second one is used in a scrollbox then there will be visual problems with clipping. (UPD: in new versions of UE added more control after clipping so it might work now)

I didn’t come to some solution that works well in both cases (multiline text items in a scrollbox), seems like I need to create a new type of scrollbox for my project in C++ (if it is possible).

As an addition for another (quite specific) case:
If you want something like the notification system in Civ 5 or similar games (widgets are filling up the vertical box from the bottom, with the newest one on the bottom, if there are too many, scroll), you can use this setup:
Your Hud Canvas Panel
->Canvas Panel anchored to your desired location (my example left side middle of screen) [Size to Content true]
->SizeBox also anchored to the same location [Size To Content True, width override and height override ticked, and set to your value]
->ScrollBox aligned to the left and bottom (so the newest notification is at the bottom)
(->Vertical Box here, but you don’t actually need it)
->Your Widgets

I’m sorry for bumping old thread, but I can’t find a way to do that :frowning:
I’m still learning can anyone tell me which node to use? please

In the widget designer with the vertical box on your canvas (from palette - panel menu ) selected you will find the rotation option under details - Render Transform - Angle.

You can do it manually (angle):


Or with a node:


this is sik how it actually works, A+!!!

Not sure if it helps, but I put the Vertical Box in a Border aligned to the bottom, so the Vertical Box will adjust to content, though the new items will still apear in the bottom (in my case is enough, don’t know yours)

My setup is Border -> Scroll box -> Vertical box. I always use a vertical box inside a scroll box so I can set padding to space out the entries. If you set the Scroll box to Vertically align bottom, then everything added into your vertical box will always appear at the bottom of the scroll box. After I have added a child to the Vertical box, I always call ScrollToEnd on the scroll box so the last child added is always visible.

The question here was about how to add children to the top. Not to the bottom, though. Add a child and it appears at the top of the list. Adding widgets at index is still not exposed to BPs.