Question How can I make a scroll view automatically right-align its items?

Hopefully this is simple. I'm currently piecing together a custom status bar for my game, using UI Toolkit. It has a scroll view with a sequence of picture labels inside it, horizontally aligned. Currently, it looks like so:



However, I would like to style it so that the image labels are right-aligned, like they are in this image edit:



This seems like it should be as simple as making it horizontally laid out instead of vertically; but I can't find the setting for the life of me. If someone could clarify how I could achieve the second version, I would much appreciate it! Thank you!

 

You can't do it from UI Builder, you need to create a style sheet and modify the right selectors accordingly. Since we are using Flex, the right property to change is flex-end, however we need to figure out where to put that property.

You need to setup your project to running with the debugger open like so:





Don't forget to click show all so that you see all of the uss properties.

First you assign a background color to your scrollview so you see what's going on.



Then you need to fiddle with the style until you get the effect you want.

My first move was to try to change the content container alignment to Flex End but that did not work:



You can see that when I hover the mouse on it then its size is the size of the buttons plus some margin.

From there you can either try to change the parent element (view port) or modify the width of the container.

So I set the width to 100% and align still does not work. But if I change justify-content to Flex End then it works:



Finally you wrap it up and add this to your style.

Code (csharp):

1.  
2. .unity-scroll-view--horizontal > .unity-scroll-view__content-and-vertical-scroll-container > .unity-scroll-view__content-viewport > .unity-scroll-view__content-container {
3.    width: 100%;
4.    justify-content: flex-end;
5. }
6.  

It's a lot of work but you can do almost whatever you want. If we had the default template source code it would be much easier than that.

 

@diorr

Huh... I really thought I'd be able to change such a significant property via the inspector. Or at least get some proper tool tips to tell me what everything does...

I want you to know that I appreciate the amount of effort you went through for a stranger's problem.

I'm just a little alarmed that something in an LTS release, with everyone being encouraged to use it, is still this convoluted. I thought they were going the way of Qt with UI Toolkit; but if we have to directly edit the file, with a text editor, to change such a fundamental property, we should at least have access to that file in the editor without going into debug mode.

 

Excuse me, you mean the UI Toolkit Debugger window. I wasn't aware that existed. Let me dig through here...

 

It's not that bad if you come from web development since css is well known and much like uss. However, the default theme is not given and you have sometimes to dig into the source code to figure out how to change things.

 

Where exactly is "Show All"? I've never seen any of this before.

 

I was a web developer about ten years ago, and this was my hope; but not my personal experience. Too much of it is closed up to be as useful as we would like, and I seriously do not care for Unity's documentation practices.

 

I found Show All.

 

This still isn't doing it for me... I'm going to walk back my design and stick to the old Unity UI system. I'm just not comfortable with something that requires me to dig through this much code for a simple right-alignment.

 

This is absolutely something you can do in UIBuilder, although it's not quite as simple as a single click. Rather than messing round editing the default theme in a text editor, create your own USS file in UIBuilder and add your own rule that modifies the scroll bar using a class name you define yourself

.

Code (CSharp):

1. .MyHScrollView .unity-scroll-view__content-container

Then add the class name MyHScrollView to your scroll view element. You can then play around with the properties that your rule sets inside UIBuilder.