# Add an element to the top of a vertical box

**URL:** <https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786>\
**Category:** UI\
**Tags:** User-Interface, unreal-engine, Widget, Blueprint, question\
**Created:** [December 20, 2017, 11:33pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786 "2017-12-20T23:33:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sam\_Carey](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Sam\_Carey](https://forums.unrealengine.com/u/Sam_Carey)\
**Post date:** [December 20, 2017, 11:33pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/1 "2017-12-20T23:33:01Z")

</div>

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

 ![224580-add-to-top.jpg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/3/7/437b61746e9940bcf67eff58efc91fee8e874aea.jpeg)

---

<div class="post-metadata">

**Author:** ![xlar8or](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/xlar8or/32/710746_2.png) [@xlar8or](https://forums.unrealengine.com/u/xlar8or)\
**Post date:** [December 20, 2017, 11:44pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/2 "2017-12-20T23:44:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sam\_Carey](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@Sam\_Carey](https://forums.unrealengine.com/u/Sam_Carey)\
**Post date:** [December 21, 2017, 1:17am UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/3 "2017-12-21T01:17:58Z")

</div>

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

 ![224602-done.png](https://d3kjluh73b9h9o.cloudfront.net/original/4X/4/6/c/46c65a061e4f414f3c9717c41c93152d1b1edc26.png)

---

<div class="post-metadata">

**Author:** ![xlar8or](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/xlar8or/32/710746_2.png) [@xlar8or](https://forums.unrealengine.com/u/xlar8or)\
**Post date:** [December 21, 2017, 1:26am UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/4 "2017-12-21T01:26:01Z")

</div>

You are welcome 🙂

---

<div class="post-metadata">

**Author:** ![eliasfrost](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/eliasfrost/32/1088157_2.png) [@eliasfrost](https://forums.unrealengine.com/u/eliasfrost)\
**Post date:** [April 18, 2023, 7:18pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/5 "2023-04-18T19:18:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![aamirShaik-rampg](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@aamirShaik-rampg](https://forums.unrealengine.com/u/aamirShaik-rampg)\
**Post date:** [December 8, 2023, 2:34pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/6 "2023-12-08T14:34:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sononeo](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/sononeo/32/717542_2.png) [@Sononeo](https://forums.unrealengine.com/u/Sononeo)\
**Post date:** [February 21, 2025, 6:11pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/7 "2025-02-21T18:11:40Z")

</div>

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:

```auto
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.  
 ![ProjectIsekai_WIP_NotificationsV2](https://d3kjluh73b9h9o.cloudfront.net/original/4X/0/f/0/0f0c0222bc7e5ded105ce712913836e6ce90b0a1.gif)

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.

---

<div class="post-metadata">

**Author:** ![ddibb1](https://d3kjluh73b9h9o.cloudfront.net/original/4X/2/8/5/28502927f1d97ba1051b3b47ccfe17233bf41ef0.png) [@ddibb1](https://forums.unrealengine.com/u/ddibb1)\
**Post date:** [June 19, 2025, 7:49am UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/8 "2025-06-19T07:49:09Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Sononeo](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/sononeo/32/717542_2.png) [@Sononeo](https://forums.unrealengine.com/u/Sononeo)\
**Post date:** [July 2, 2025, 8:53pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/9 "2025-07-02T20:53:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sononeo](https://d1ap1mz92jnks1.cloudfront.net/user_avatar/forums.unrealengine.com/sononeo/32/717542_2.png) [@Sononeo](https://forums.unrealengine.com/u/Sononeo)\
**Post date:** [July 2, 2025, 8:56pm UTC](https://forums.unrealengine.com/t/add-an-element-to-the-top-of-a-vertical-box/412786/10 "2025-07-02T20:56:02Z")

</div>

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.
