Precedence of UI Elements, can't get my buttons to wrap

Getting Started
,
1

Hi,
so I’m sitting in front of my first Unity project and want to create a simple UI with around 10 buttons. The idea is that the buttons are displayed next to each other and wrapped once there is not enough space. They should maintain their aspect ratio (square).
I am using the UI Builder and have a Visual Element (kind of as background), a Scroll View underneath and a label and all the buttons underneath there. Also, I’m using a Style Sheet for the buttons.

Long story short: My buttons are all displayed vertically instead of horizontally and I can’t get them to wrap and maintain their aspect ratio. I played around with the properties of the different UI elements I mentioned, but I’m not sure which one “beats” which one (so if I need to adjust the setting in the scroll view, the style sheet etc.).

Could somebody advise me what I need to set where to achieve my goal?

Thank you very much in advance.

EDIT: I already checked Unity - Manual: ScrollView and set the Scroll View properties to horizontal and wrap. Now that I read more carefully, it says to set the properties of the Scroll View’s content container and not of the Scroll View itself. However there all the fields are greyed out. What can I do?

2

Elements are organised by their parent element. So if you want to arrange elements in a particular way, that’s by styling the parent element.

So to get something like this where the buttons wrap around:

image
image1507×695 40.3 KB

I used these USS styles:

#root {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

#container {
    width: 50%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    flex-direction: row;
    flex-wrap: wrap;
}

Button {
    height: 25%;
    width: 100px;
}

Namely the container’s flex-direction is set to row, and flex-wrap is, of course, set to wrap. And then the buttons are sized as such to demonstrate how they wrap around.

Ideally get out of the habit of trying to style elements directly. In most cases its better to use USS styles to indirectly style elements via style selectors.

3

Thanks, however my issue is/was, that I was using a ScrollView, that didn’t let me add a selector to its child (the content-container, you can see that it’s greyed out):

image
image477×436 20.3 KB

I now had to manually open the .uss file fromt he hard drive via NotePad to add a Selector for the content-container and set it to wrap its content. Not very convenient, but it kind of seems to work.

Or maybe I misunderstood you, but styling the parent (the ScrollView) didn’t affect the items in its child (the content-container) at all, that’s what I tried before.

4

I mean what I said still applies. If you want to wrap elements you do so via styling the parent element. In the case of a ScrollView, that’s the content container and not the outermost ScrollView element itself.

And of course as I mentioned you need to use style selectors to style it. Though you don’t need to open the style sheet in notepad to edit it. You should be able to add and edit styles in the UI Builder.