Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

TextField properties not working correctly?

Discussion in 'UIElements' started by MartinIsla, Dec 24, 2018.

  1. MartinIsla

    MartinIsla

    Joined:
    Sep 18, 2013
    Posts:
    64
    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
    harko12 likes this.
  2. vertxxyz

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    39
    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:
    4,501
    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.