Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Setting buttons/elements sizes and layout

Discussion in 'UI Toolkit' started by rogerdv, Aug 19, 2019.

  1. rogerdv

    rogerdv

    Joined:
    Jul 16, 2012
    Posts:
    88
    Yesterday I started learning the new UIelements system to create a custom editor for my game. One of the first problems I found is that I dont know how to properly arrange the buttons, and the size of other elemtns like TextFields. I would like to place two or more buttons in a row, but even when I created a VisualElement with class="row" and put both buttons inside, they expand to the width of the window. How can I set the button size? I tried to create a class in the uss file, but Im not sure that width/height are accepted attributes. Where can I find the list of supported class attributes?
     
    rogerdv, Aug 19, 2019
    #1

  2. Kirbyrawr

    Kirbyrawr

    Joined:
    Jul 23, 2012
    Posts:
    945
    If you are using a uxml file you can do something like this:

    
<Button name="foo-button" text="Foo" style="width: 50%"/>


    The thing i'm not sure is how to make the button fit the text.

    Additionally, you can use this tool to know how to place your elements.
    https://yogalayout.com/playground
     
    Kirbyrawr, Aug 19, 2019
    #2

  3. rogerdv

    rogerdv

    Joined:
    Jul 16, 2012
    Posts:
    88
    How can I do when the button is created via code?
     
    rogerdv, Aug 19, 2019
    #3

  4. Kirbyrawr

    Kirbyrawr

    Joined:
    Jul 23, 2012
    Posts:
    945
    You can do this:
    Code (CSharp):
    1. var button = new Button();
    2. button.style.width = new Length(50, LengthUnit.Percent);
     
    Kirbyrawr, Aug 19, 2019
    #4

  5. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi rogerdv,

    The list of supported USS properties can be found here : https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html

    In your case if you just set class="row" on a VisualElement it won't do anything if there's no rule defined in a corresponding USS file.

    A basic thing you can do is something similar to this :

    Code (CSharp):
    1. .row {
    2. flex-direction: row;
    3. }
    4.  
    5. .button {
    6. flex: 1;
    7. }
    Then you add the "row" class to your container and the "button" class to the buttons.

    There are more basic examples to get you started here : https://github.com/Unity-Technologies/UIElementsExamples
    And to understand how the layout works I suggest you start here : https://docs.unity3d.com/Manual/UIE-LayoutEngine.html
     
    jonathanma_unity, Aug 20, 2019
    #5

  6. pirho_luke

    pirho_luke

    Joined:
    Oct 24, 2017
    Posts:
    21
    pirho_luke, Aug 20, 2019
    #6

  7. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,218
    Hey there, I am having issue doing this in USS. I tried to do it and it kept giving me feedback that it was invalid, then I got a bit confused when I looked at the docs.



    Am I missing something? I was wanting to make 4 buttons in a row each take up 25% of the width so I just tried this first:

    Code (CSharp):
    1. .buttons-main {
    2.     width: 25%
    3. }
    but it came back with:
    Code (CSharp):
    1. StyleSheet import: type=Semantic, code=UnsupportedUnit file=Assets/instance.id/AnimAdjuster/Editor/AnimEditor.uss
    2.     25%
    I saw that since you posted this:
    Code (CSharp):
    1. <Button name="foo-button" text="Foo" style="width: 50%"/>
    I figured that would have worked?
     
    MostHated, Nov 15, 2019
    #7

  8. rogerdv

    rogerdv

    Joined:
    Jul 16, 2012
    Posts:
    88
    I solved all those problems installing the UI Builder package. Still very primitive, but helps.
     
    rogerdv, Nov 15, 2019
    #8

  9. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    1,203
    Regarding:
    Code (CSharp):
    1. .buttons-main {
    2.     width: 25%
    3. }
    you were just missing the 
    ;
    after 
    25%
    . Should be:
    Code (CSharp):
    1. .buttons-main {
    2.     width: 25%;
    3. }

    Glad to hear it helps! Just a note that specifically the % unit for USS length-based properties is not currently supported in the UI Builder. So you if you really wanted to use % you need to do it by hand still in USS. But this will be fixed soon.
     
    uDamian, Nov 16, 2019
    #9
    CNC_Sai likes this.