ScrollView item orientation

Hey,

I am once again struggling with ScrollView thus I am now asking if it is possible to achieve a scrollable GridView using the ScrollView and how to achieve it? See screenshots below. Thanks for the help in advance.

Currently, scrollView gives me the following result

The way it is supposed to look (items filling full width, wrap to next line and still vertically scrollable)

Add an empty visual element to the content of the scrollview and set its flex direction to “left to right” and activate flex wrapping.

oh that could work, haven’t thought of that.

Do I have to do that in code or is there a simple way of doing this in the UIBuilder, because on my end it doesn’t let me drag in anything as a child of the ScrollView?

You can do all this in UIBuilder, just drag the VisualElement on ScrollView and it will automatically move it to scrollview content

Just tried your suggestion and it doesn’t seem to work like that. Now the items are laid out that way, but the scrollbar isn’t showing up, using these settings for the ScrollView.
7971174--1022601--upload_2022-3-17_13-14-20.png

The scroller visibility is set to auto, so no scrollbar will be shown if there is enough space to display everything

The thing is there isn’t enough space. I display around 1000 items in this list. Using the debugger shows the size of this element being 14000 pixels.

7971627--1022706--upload_2022-3-17_15-23-49.png

If I set the height of the scrollView to some pixel size that is inside my monitor’s resolution, it shows the scrollbar and everything works fine, but this seems a little hacky to me to use a script to set the height, shouldn’t auto do some flexbox magic?

Yes it should.
I may be missing something with your hierarchy, but it could also be a problem with the code that detect if the scrollbar is needed. Does the scrollbar work if you set to be visible (instead of auto) in the settings? :
7971927--1022772--upload_2022-3-17_11-37-11.png

Doesn’t work, only the up and down buttons are shown. What could I be getting wrong in the hierarchy? What things do I need to pay attention to?

The following is my hierarchy

Is #item-area the same sizeas it’s parent (the content-containter)?

Yes

It seems like my local prototypes have a difference with yours. Could you share all UXML, C# and USS involved on the forum or report a bug in the editor with clear steps to reproduce?

I figured it out. Seems like it’s not allowed to have a parent of the ScrollView with flex-grow set to something like 1.

1 Like