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.

[ddibb1 (ddibb)]

Hi @Sononeo I was also looking at making a reversed order vertical box. I am however not very comfortable with C++ or coding in general, but I’m learning as I go basically. So forgive my ignorance, but wouldn’t you always want to InsertSlot at index 0 in this case? And can’t trying to insert at index -1 cause problems?

[Sononeo]

Hey! No worries, with the custom box slot I made it does do that.

It will insert a child at the index of 0 if there are other children, so it’s always at the first of the list, else it will insert before any children.

I don’t fully get why I have to do the latter when there are no children, but I had exceptions and other issues when trying to insert at the index of 0 all the time.

Maybe I knew at the time other than those issues, but it’s been a while now and I’ve not had to think about it since.

[Sononeo]

Just to add the default param value for inserting is INDEX_NONE (-1), so internally it may be doing some logic based on if it gets an index value greater than that or not.

Likely defaults to adding to the end if -1 else will insert at the specified index if valid.