Help with TextFields

I've been trying all day to get TextFields to sit in a horizontal line of 3, shrunk to fit into a node, but I can't seem to figure out how to do it.

I've never used uss files before, but have been trying to learn, but I still have an extremely difficult time figuring out what does what. Though mostly dumb luck and hours of trying every possible combination of things, I think I've figured out most of it. But I can't seem to figure out how to access the textfield's input box VisualElement so that I can assign it a uss class so that I can add max-width and change text/background color.

I also feel like there logically should be a way to add the "hori-container" to that parent VisualElement, and have the textfields added to it automatically have some sort of uss class applied, rather than doing each child VisualElement manually. I just can't seem to find out how or why.

Also, finally, the only reason I've been able to get as far as I have is by looking at the "Matching Selectors" classes in the UI Toolkit debugger (after "Pick Element"-ing the TextField in the Inspector)and trying a number of them in the uss file, but I can't seem to do anything to the input box because I don't know how to access that element in code to add any of the classes to it..

I'm really stumped with this whole system. Some help would be awesome.

Code (CSharp):

1. styleSheets.Add(Resources.Load<StyleSheet>("Node"));
2. var timeContainer = new VisualElement();
3. timeContainer.AddToClassList("hori-container");
4. mainContainer.Add(timeContainer);
5.  
6. hourField.AddToClassList("hori-text-label");
7. minuteField.AddToClassList("hori-text-label");
8. secondField.AddToClassList("hori-text-label");

and my uss:

Code (uss):

1. /*horizontal container*/
2. .hori-container {
3.     flex-direction: row;
4.     width: 150px;
5. }
6.  
7. /*the label text*/
8. .hori-text-label > .unity-base-field__label {
9.     color: white;
10.     min-width: 20px;
11.     max-width: 50px;
12. }

 

@Darksunrise957 you are on the right track right now and seem to be getting the basic concepts.

I believe your only issue is what you are using as your selector. The TextField is actually made up of two child elements, the label and the field (text editor). You are only selecting the Label, so when you size it you are not accounting for the field. You will probably want to downsize the label too, but you need to start with the container of those elements first (the TextField).

Because you applied the style class to the TextField you can just use:

.hori-text-label {

    max-width:  50px;

}

Then you can also tweak the sizing of the label with your existing style block.

As a minor tip, if you have a bunch of TextFields or other elements you want to all be styled universally, you can use the element type as a selector as follows:

TextField {

{

I hope this helps!

 

Oh! I think I understand better now, and It seems to be working as I'd hoped.

So, if I understand right, it works like ."custom class name" > "overriden class name"?
In hindsight, that's actually what I remember hearing, but my brain hadn't quite put the pieces together on which class to override, or how to use the ui debugger to find it, but it feels a bit obvious now. Doh. XD

Thanks for the help!

 

Cool. I would say it is closer to "find elements with this class name" > "then find the direct child elements with this class name". The ">" signifies direct descendent only and " " as any descendant.

Learning how to use selectors to select specific elements of a document object model is a bit tricky at first, it took me a little time when I first started web dev, but once you get it, it opens up all kinds of scenarios. Read through the section on USS selectors in the Unity manual and supplement it with some HTML CSS selector walkthroughs online.