Search Unity

Setting buttons/elements sizes and layout

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

  1. rogerdv

    rogerdv

    Joined:
    Jul 16, 2012
    Posts:
    90
    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:
    90
    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. larsolm5853

    larsolm5853

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

  7. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,235
    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:
    90
    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,231
    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.