UMG ScrollBox vertical inside Scrollbox horizontal

Development Programming & Scripting UI
, , ,
1

Hi,
I looking for to make an UI like Clash Royal.

Is there a solution to have a Scrollbox vertical inside a Scrollbox horizontal ?

My vertical scrollbox have priority so my parent scrollbox (horizontal) does not work anymore.

Any idea ?

1 Like
2

In this case the priority goes to whatever the cursor is over atm. If it’s over the inner scrollbox that’s the one that will consume the input and scroll (providing it can scroll to start with).

How else would that work? You want a modifier button or an area that is excluded from scrolling so the outer element can take over?

3

Thanks for response.
I’m agree with you.
Have you any idea to reproduce a Clash Royal UI ?
ScrollBox seem to not be a good idea…

4

done without ScrollBox but with touchinput override functions

1 Like
5

Hiya, sorry for digging up this old thread, but I’m now in UE5, would you mind sharing your solution if you’re still active? :slight_smile:
Thx!

6

Hi! Could you please share a solution, please? I have been struggling with the same issue for over two weeks… :frowning:

7

I’m back to this again, did you end up finding a solution? @SupportiveEntity @Everynone @pezzott1

Would you by chance know what @martoof meant here? “done without ScrollBox but with touchinput override functions” Been stuck with this problem for a bit now :frowning:

Thx for any help

~t

9

I was of the impression the scroll box selected, regardless of touch input or mouse input would take priority for the time being. As with focus on most others.

Maybe the user may be overriding the touch received for each of the widgets and manually processing the touch/drag logic?

What’s the use case? Just a scroll bar inside of another scroll bar?

10

Hmm, ok so yeah basically as you stated, I got it working in Unity a couple of years back as seen here, game prototype - YouTube the user can swipe vertically and horizontally. Mind you this wasn’t a built-in solution, but I’m sure UE5 can handle this

~t

11

The scrollbox has public methods to set scroll position. The difficulty here is the amount of use cases. When you focus a widget, the focused widget processes input and decides to bubble up input to a parent widget or not. This is called input handling. If you were to press the arrow keys, most likely they are consumed by the scroll box leaving you with nothing to work with. Haven’t checked if there is default scroll button functionality. You can try this anyhow.

Create a UserWidget “ScrollBoxController” and make it hold the scrollbox, and the nested scrollbox inside that. Override the OnKeyDown method and test for a “drag” button such as a middle mouse button. While the key is down, set the position of both the nested scroll boxes to their current scroll position + your mouse movement during tick.

Basically any widget you focus within such scroll box, or even the box itself if that is the only interactive thing, would bubble up input into the wrapping ScrollBoxContainer.

2 Likes
12

Thx Roy will try this, I should mention in my case this is for mobile just as a note. I wanted to post up where I’m currently at in UE, as you will see the Vertical box takes precedence where it’s laid out.

And for some additional clarity I used this tutorial for the swipe controls

Thx for commenting!

~t

2 Likes
13

For what I described you need to make sure neither of the scroll boxes process the swipe as a scroll action, but the wrapping “ScrollBoxController” panel does. I’d have to deep dive into code to tell you how it’s processed. You might be able to get the desired result with playing with the IsFocusable checkbox on the scrollboxes or overriding the input methods on a scrollbox subclass as well.

1 Like
14

I agree with Roy here, my best recommendation would be to override the input methods on a scrollbox derived class and just process it manually. Otherwise you need to make a number of changes a bit deeper and that’d be overkill for such basic mechanics.

1 Like
15

Thx @Roy_Wierer.Seda145 @SupportiveEntity Is this something I could manage with BP? As I’m not a ‘coder’ in the traditional sense unfortunately :frowning:

thx guys

~t

16

Yes it should be :).

1 Like
17

Yep! Any blueprint (and most things with any form of event graph) can override their parent’s functions by going to this menu in their BP:

image

however if the parent is C++ this can get a bit more complicated as not all functions are exposed, but in your case that shouldn’t be applicable.

1 Like