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!
1 Like
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.
[HR][/HR]
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.
15 Likes
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
4 Likes
I’m sorry for bumping old thread, but I can’t find a way to do that 
I’m still learning can anyone tell me which node to use? please
@IvoryShots,
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:
3 Likes
this is sik how it actually works, A+!!!
1 Like
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.
Thank you very much. So easy like that ^^
Here’s how you add children at any index of a scroll box. Re-create this function in a blueprint library so that you can reuse it in any widget:
(L_WidgetsArray is a local variable in the function of the ‘widget object reference’ type)
This function will take a scroll box as an input and save all of its children in a temporary local array variable called L_WidgetsArray. It will then insert the input child widget into the temporary array at the specified input index. It will then clear all the children in the input scroll box and add all the children to it from L_WidgetsArray which now contains your child widget inserted into it.
To add the child all the way at the end of the scroll box, you need to get the last index which you can get using the ‘Get Children Count’ node.
There’s a C++ function that does this that’s sadly editor only. I’ve been searching for a way to make this work for ages. I’ve encountered no errors so far with your method. Thank you for this!
1 Like
You should be able to just rotate the vertical box 180 degrees from its widget’s Designer
That was not the point, though. It was about the reversed order of elements.