Add an element to the top of a vertical box

[Sam_Carey]

I want to be able to add a new element to a vertical box at runtime and it at the top while the other elements shift down

[xlar8or]

Hey there, does it have to be a vertical box? You can do this easily with Grid Panel since you can control the indexes. Afaik you can’t do that natively with vertical box, but you can kind of hack it. After you add a child into the vertical box you save all of the items into an array and you clear the vertical box, invert the array and readd them again. It’s not pretty but it works.

[Sam_Carey]

I was able to do it with the grid panel.
Thanks for the help:)

[xlar8or]

You are welcome

[eliasfrost]

This is an old thread but I suppose this may come up in a google search someday.

I had a similar problem with popup messages in my game, the way that I “solved” the problem is that I set the scale of the vertical box to -1. This resulted in the children to be flipped vertically but I solved that by setting the scale of those widgets to -1 as well. Now any new elements that are added will appear to be added at the top.

[aamirShaik-rampg]

Here’s a simple workaround:

• Add another vertical box as child to the vertical box and set scale of the child vertical box to -1 along Y
• Add child widgets to this vertical box and set each child’s scale to -1 along Y

Hope that this helps

[Sononeo]

Just want to add that while this method of inverting scaling works, I had other issues surrounding the scaling that made it feel a bit wonky.

Instead I looked at the VerticalBoxSlot class and made my own slot class with the build slot function recreated so that it would do the following:

void UNotificationBoxSlot::BuildSlot(const TSharedRef<SVerticalBox>& VerticalBox)
{
	const int32 ChildCount = VerticalBox->GetChildren()->Num();
	const int32 Index = ChildCount > 1 ? 0 : ChildCount - 1;
	
	VerticalBox->InsertSlot(Index)
	           .Expose(Slot)
	           .Padding(Padding)
	           .HAlign(HorizontalAlignment)
	           .VAlign(VerticalAlignment)
	           .SizeParam(UWidget::ConvertSerializedSizeParamToRuntime(Size))
	[
		Content == nullptr ? SNullWidget::NullWidget : Content->TakeWidget()
	];
}

The result below without the need to mess with inverted scaling.

You would have to create your own panel widget to make use of the slot, which is simple enough if you follow how the VerticalBox panel widget is laid out.

Also requires being comfortable in working in C++.

Just in case anyone else came across this wondering the same thing.