moving around(expanding) widgets in a scrollbox dynmically.

Development Programming & Scripting Blueprint
, , , , ,
1

Hey there,

I’m trying to work out how to move around widgets in a scroll box.

More specifically, When A widget expands, I want to be able to push the rest of the list down or up.

UInreal
UInreal3146×1440 172 KB

  1. Is the first widget in the box.

  2. You click add, the editable box uses an animation to pop down underneath and tucks away again to add to the combo box

  3. IF another widget is added to the scrollbox it obviously blocks the editable box from animating as its behind it.

is there a way to have all the widgets in the scrollbox move down while the editable box is open, and then move up when it tucks away?

Thanks.

Update: The only thing I can think of is to give the widget an animation that moves it down and trigger all of them at once when it’s pushed. And reverse when it’s over.

2

I don’t fully understand the setup. But if you want to push other widgets in the scroll box when animating one of the widgets:

  1. Wrap the widget that needs to grow in an Overlay
  2. add a Spacer to the overlay
  3. Set the widget and spacer inside the overlay to fill
  4. Animate the size of the Spacer
1 Like
3

Yeah, that’s exactly it, I want to push the widgets down when It expands.

Unreal
Unreal4480×1440 481 KB

I think I’ve done it wrong. It makes sense, we use the spacer to animate the widget wider inside the scroll box, pushing everything down.

The scroll box looks to be working like a layer, I assume it is doing it, But its behind the second widget.

1 Like
4

Instead of animating the Transform → Scale of the Spacer, you should be able to animate a property called “Size”.

image

image
image833×641 36.7 KB

5

Ohhhh right, I see, Yeah OK That totally works. I’m using a similar one with transform to flick out the editable box.

I Apologise, I think I got confused.

My issue is I have a scroll box. And when the editable text box flicks out from underneath, I want the rest of the widgets in the scroll box to move down to allow the space to see the editable text box.

Hopefully this image makes sense.

UInreal
UInreal4480×1440 357 KB

(The editable text box is apart of the widget)

The image on the left is what I’m getting. (When the add button is pushed, the editable text box is hidden and doesn’t push the second widget down to allow space.

The image on the right is what I want to happen when the editable text push flicks out.

6

OK so After messing around with it, I can confirm it’s behind.

The layers aren’t stacked like I thought initially. Even thought one is below the other in the scroll box, They technically are still layered on top of each other.

Things to try today.

  • Change the layering? So they are on the same layer and will move each other.
  • Insert A spacer under the widget dynamically and then expand and shrink it, But I’m pretty sure you can’t add components like that.
  • Maybe test a drop-down menu tutorials and see if there’s something they use to bump the list down with a drop-down.

Update: OK What I’m trying to do now is use a render translation node to effect only the children not currently being used. I think I’tll work. It’s using lerps etc to smooth it out.

Update1: Ignore that. Its the same but just using animations.