ListView + Flex not working

UI UI Toolkit
1

The ListView is 300px wide. Flex directions is set.

I populate the list by code. Yet it only grows downwards and not in width. I want to have 3 items next to eachother per row. See the image below. (The darkgreen is the ListView width)

1170×675 165 KB

Settings ListView:

I fill the list like this

ListView buildingList = _ui.visualTree.Q<ListView>("buildinglist");
for (int z = 0; z < 100; z++)
                {
                    Button button = new Button();
                    button.text = building.Value.buildingName;
                    button.AddToClassList("build-icon");
                    button.style.backgroundImage = new StyleBackground(building.Value.buildingIcon);
                    buildingList.Add(button);
                }

How can i use flex so i can have 3 items per row?

2

You need to use ScrollView instead. ListView is a data container that needs an itemSource,makeItem and bindItem delegates, you cant add elements to it directly.

3

741×300 1.65 KB

Preview UI BUILDER

INGAME

691×470 118 KB

Got it almost working except the scrollview is not using the entire width as you can see in the second picture. Inside the scrollview i added a visualelement, because Flex only seems to work within a visual element.

The first picture is from the UIBuilder and shows i set the with of the scrollview to be a 100 percent.

Any ideas what might cause this?