Search Unity

  1. All Pro and Enterprise subscribers: find helpful & inspiring creative, tech, and business know-how in the new Unity Success Hub. Sign in to stay up to date.
    Dismiss Notice
  2. Dismiss Notice

TextField properties not working correctly?

Discussion in 'UI Toolkit' started by MartinIsla, Dec 24, 2018.

  1. MartinIsla


    Sep 18, 2013
    FIXED! ❤


    First of all, thanks for your support. Your answers are really helping me figure out how things work.

    I currently have a problem with TextField's properties.

    I have a node with a TextField.

    This TextField is set to multiline = true using C# (off-topic: would it be possible to do this using USS?)

    These are that TextField's USS properties:

    Code (CSharp):
    1. #messageText {
    2.     flex-grow:0;
    3.     -unity-text-align: lower-right;
    4.     -unity-word-wrap: true;
    5.     height: 50;
    6.     max-width: 150;
    7.     margin-left: 2.5;
    8. }
    As you can see, the TextField ignores the text-align property.
    While writting this thread I realized *maybe* it was because the TextField wasn't the text itself, so I changed it to

    Code (CSharp):
    1. #messageText {
    2.    min-height: 100;
    3.    margin-left: 2.5;
    4.    -unity-word-wrap: true;
    5. }
    7. #messageText * {
    8.    -unity-text-align: upper-left;
    9.    height: 50;
    10.    max-width: 150;
    11. }
    And text-align works now!


    Now the problem is only around multiline and word-wrapping.

    Unity seems to understand it has to move to the next line because the cursor actually goes down. However, the text keeps appearing on the first line:


    And when I select the text it looks like it's actually trying to place the text in the lines below:

    Any ideas for me here? Thank you!


    I used the UIElements Debugger to see what was going on and to peek Unity's properties.
    Turns out the child of the TextField was a TextInput object.

    So this is how I fixed it:

    Code (CSharp):
    1. #messageText {
    2.     flex-direction: column;
    3.     height: 100;
    4.     width: 150;
    5.     margin-left: 2.5;
    6.     -unity-word-wrap: true;
    7. }
    9. #messageText TextInput {
    10.     height: 100;
    11.     width: 150;
    12.     -unity-text-align: upper-left;  
    13.     -unity-word-wrap: true;
    14.     -unity-clipping: clip;
    15.     overflow: visible;
    16.     white-space: wrap;
    17.     margin-right: .75;
    18. }
    So it was the white-space: wrap; thing. Found it while peeking the other properties!

    EDIT 2:
    So I just realized white-space: wrap was working because it broke the white-space: nowrap. What's the right way to do it?

    EDIT 3:
    It's working only with white-space: wrap. Unity says "Invalid value for WhiteSpace: wrap", but it actually exists.

    EDIT 4:
    It was white-space: normal. My bad!
    Last edited: Dec 26, 2018
    bobbaluba and harko12 like this.
  2. vertxxyz


    Oct 29, 2014
    This sounds like my new life with CSS. Powerful but everything needs to be tweaked constantly as you continue building a UI.
  3. Lurking-Ninja


    Jan 20, 2015
    No, if you are doing it right. If not, then well, yes, you need to tweak the parts where you didn't do it well enough.