Search Unity

Text Field and TextArea

Discussion in 'UI Toolkit' started by Chris_Entropy, Mar 1, 2022.

  1. Chris_Entropy

    Chris_Entropy

    Joined:
    Apr 11, 2011
    Posts:
    202
    I am trying to create a custom inspector with UI Elements and the UI Builder. Is there a way to make the Text Field behave like a TextArea would in the classic inspector? I.e. having controls for resizing and scrolling the text, and the text being aligned top left instead of center left?
     
    Chris_Entropy, Mar 1, 2022
    #1

  2. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Hi @Chris_Entropy !

    I am not sure what you mean by having a TextField that behaves like a TextArea.

    - Scrolling the text can be achieved through the C# API like so:
    inputField.SetVerticalScrollerVisibility(ScrollerVisibility.Auto);

    - As for text alignment, this can be done in the UIbuilder in the Text foldout:
     

    Attached Files:

    HugoBD-Unity, Mar 1, 2022
    #2
    Chris_Entropy likes this.

  3. Chris_Entropy

    Chris_Entropy

    Joined:
    Apr 11, 2011
    Posts:
    202
    Thanks for the quick reply. I got text alignment covered with the USS file. I can't edit the TextInput alignment directly, only that of the TextField caption label. In the version (Unity 2020.3.27f1, Unity UI 1.0.0, UI Builder 1.0.0 preview 18) I am using, the SetVerticalScrollerVisibility does not seem to exist, unfortunately. Maybe I need to live with it or upgrade.
     
    Chris_Entropy, Mar 1, 2022
    #3

  4. HugoBD-Unity

    HugoBD-Unity

    Unity Technologies

    Joined:
    May 14, 2018
    Posts:
    499
    Indeed, the scrollbar is a feature that was added in 2022.1.

    As for the styling of the TextField, it seems like the "-unity-text-align" style doesn't propagate to children. It's unfortunate, and I'll take some notes to address this in the future, but in the meantime, you can work around this. First, note that TextField is a "composite root" which means it has children. You can target the TextField children to apply styling to them like so:

    textField.Q("unity-text-input").style.unityTextAlign = ...

    (this is pseudoCode, I haven't tested it. Note that it could also be done through USS)
     
    HugoBD-Unity, Mar 1, 2022
    #4
    Chris_Entropy likes this.

  5. emrehalici

    emrehalici

    Joined:
    Mar 3, 2022
    Posts:
    3
    "unity-text-input" doesn't work. Correct class to target is "unity-base-text-field__input".
     
    emrehalici, Feb 2, 2024
    #5
    HugoBD-Unity likes this.