Search Unity

  1. 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

Text Field: How to Remove Label ?

Discussion in 'UI Toolkit' started by joe-cabb, May 2, 2020.

  1. joe-cabb

    joe-cabb

    Joined:
    May 28, 2017
    Posts:
    6
    The default Text Field has two built-in children: a Label and the actual Text Field (of class #unity-text-input)

    For the UI I'm building I just want the Text Field to enter.

    Is there any advice on how to delete the child Label object or otherwise disable it?

    Or is there an alternative way to create a Text Input field?

    Thank you!
     
  2. Flipps

    Flipps

    Joined:
    Jul 30, 2019
    Posts:
    48
    It seems that you also cannot change some properties like the color of the Label etc.
     
  3. RedHillbilly

    RedHillbilly

    Joined:
    Mar 24, 2014
    Posts:
    9
    You have to change the display style of the label within the textfield to none.
    To do that, in the "Add new selector", add the following entry (assuming your field is called MyTextField:
    .MyTextField > .unity-base-text-field__label

    upload_2020-5-3_16-2-45.png

    Which will create a modifier which you can then edit:
    upload_2020-5-3_16-3-14.png

    This modifier will only affect the label within your MyTextField object.
    Modify the display style to none, and then add it to your "MyTextField" object.

    The label disappears:
    upload_2020-5-3_16-5-46.png

    Same for changing the color, etc..
     
    Flipps likes this.
  4. joe-cabb

    joe-cabb

    Joined:
    May 28, 2017
    Posts:
    6
    Thank you, RedHillBilly!

    Worked perfectly.
     
  5. sniffle63

    sniffle63

    Joined:
    Aug 31, 2013
    Posts:
    194

    Is there something else you have to do for this to work on nested elements?

    Doing this works fine on FloatFields and TextFields and things that just have 1 set of children, but I can't seem to affect anything that is a child of any of the initial children of the element.

    For example, I'm trying to change the background color of a progress bar by saying
    .progress > .unity-progress-bar__background

    upload_2020-5-4_15-7-59.png

    And then I added the
    .progress
    to my progress bar
    upload_2020-5-4_15-8-39.png


    But it doesn't show that it's making any changes to the
    .unity-progress-bar__background


    But if I change it to say
    .unity-progress-bar__container
    it works fine for affecting that element. (which is the first child of the progress bar, and the background is the child of that container)

    So I'm curious what im doing wrong for it to not work on the background element
     
  6. DonLoquacious

    DonLoquacious

    Joined:
    Feb 24, 2013
    Posts:
    1,667
    Apologies if I'm misunderstanding, but if you mean that you need it to affect items further than 1 level down in the hierarchy from the "parent" class, then:
    .progress > .unity-progress-bar__background

    would just become
    .progress .unity-progress-bar__background

    https://www.w3schools.com/cssref/css_selectors.asp
     
    sniffle63 likes this.
  7. sniffle63

    sniffle63

    Joined:
    Aug 31, 2013
    Posts:
    194
    Awesome, I was trying to figure out how to search for what I was looking for in CSS, but its been literally 10 years since I last used it so I was having trouble finding the answer!

    And the w3 school site clearly explained what I was doing wrong. I assumed '>' was an override of the right-hand element, which is what I get for assuming


    Thanks a lot for the quick response :)
     
    Last edited: May 4, 2020
unityunity