Search Unity

Put elements side by side (left -> right)

Discussion in 'UI Toolkit' started by UniZoja, Sep 26, 2021.

  1. UniZoja

    UniZoja

    Joined:
    Oct 1, 2018
    Posts:
    30
    I am struggling to understand how to align my items from left to right.

    In webdev its actually pretty simple, something like this:

    https://jsfiddle.net/f4r5jhbu/3/

    I know the UI toolkit it similar but not the same, but still its a basic function. Hope someone can explain me why the same logic does not apply on unity.

    side_by_side.png

    Also, which styles exactly are all these symbols, is there a cheatsheet or something similar somewhere? It would be useful to see on hover which one it actually is, e.g.: wrap/nowrap etc. Right now if I hover over each symbol I see for example flex-wrap for each one of them.

    symbols_meaning.png
     
    Last edited: Sep 26, 2021
  2. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hi @UniZoja,

    Have you set the Flex-Direction on the #unity-content-container to column ? From your screenshot, it seems to be set to row.

    Thanks for the feedback regarding the tooltips, I'll bring it to the team.
     
    UniZoja likes this.
  3. UniZoja

    UniZoja

    Joined:
    Oct 1, 2018
    Posts:
    30
    Thanks for the help again. I had to override the styles of unity-content-container. I ignored it because it was greyed out, that on me.

    For other people:

    1. Create a new selector
    2. Name it #unity-content-container and now you can apply styles on it
    NOTE: If you have multiple scrollbars, it will affect all. In my case I wanted only one of my scrollbars to be affected.
    For this you can add the parent to the selector, in my case: #Floors#unity-content-container