Search Unity

  1. Click here to see what's on sale for the "Best of Super Sale" on the Asset Store
    Dismiss Notice
  2. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

TextField properties not working correctly?

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

  1. MartinIsla

    MartinIsla

    Joined:
    Sep 18, 2013
    Posts:
    98
    FIXED! ❤

    Hello!

    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.
    upload_2018-12-24_12-6-34.png

    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. }
    6.  
    7. #messageText * {
    8.    -unity-text-align: upper-left;
    9.    height: 50;
    10.    max-width: 150;
    11. }
    And text-align works now!

    upload_2018-12-24_12-12-48.png

    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:

    upload_2018-12-24_12-15-30.png

    And when I select the text it looks like it's actually trying to place the text in the lines below:
    upload_2018-12-24_12-15-54.png

    Any ideas for me here? Thank you!



    EDIT: FIXED!

    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. }
    8.  
    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

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    46
    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

    Lurking-Ninja

    Joined:
    Jan 20, 2015
    Posts:
    5,457
    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.
     
unityunity