Search Unity

The Slider element is straight up broken

Discussion in 'UI Toolkit' started by Moohasha, Jul 2, 2022.

  1. Moohasha

    Moohasha

    Joined:
    Jul 8, 2013
    Posts:
    10
    I'm trying to learn this "new" UI Toolkit system (last time I played around with any sort of UI in Unity was 4+ years ago) and I'm really struggling with the Slider. Note that I don't have a .uss file, I'm just playing around with inline styles for now. All I have is a Slider with an absolute position so that it doesn't get squished or stretched, and the only style property I have changed is the Align Items.

    As you can see below, the label is wasting a ton of space, the text in the input field is 1 px tall, and the slider bar is being stretched well beyond the bounds of the visual element (grey box).

    upload_2022-7-2_11-13-0.png

    Using the default alignment, everything stays within the element's bounding box, but now the input field is not centered.

    upload_2022-7-2_11-14-52.png

    This is just the latest in what has turned into a day full of frustrations with UI Toolkit. Even just a minimally functional UI seems to require extensive customization of the style sheet because the defaults just don't work.
     
    Moohasha, Jul 2, 2022
    #1

  2. sebastiend-unity

    sebastiend-unity

    Unity Technologies

    Joined:
    Nov 9, 2015
    Posts:
    184
    Hi,
    Sorry to hear you are having issues with the Slider. I am trying stuff on my side and this is a screenshot of what I could replicate from the ones you shared:

    upload_2022-7-6_16-29-29.png

    I would check a few things in your document:
    - Height: -60px --> was this intended?
    - Do you really need Absolute mode? Usually you can get away with Relative but specifying explicit Width and Height
    - Is it possible there are other things we are not able to see from your screenshots? I am not getting the tiny font size issue

    Also, in general, I would like to mention that all field-like controls (which are by default used in inspectors as fields) have a bunch of styles that come with built-in selectors. Slider is one of those controls, so a lot of styles come from .unity-base-field (and all of its siblings and children); the Label's width for instance is dictated by .unity-base-field__label's min-width of 150px (BaseField behaviour by default). You can remove this by specifying a different setting for that property in your own selector (e.g. min-width: auto;). I agree with you in that those default style selectors can really interfere with the ability to play around with those controls and prevent simple usage. We are in the process of reviewing Runtime themes to allow for more simplicity and flexibility of use but in the meantime, I suggest using the UI Toolkit Debugger to check what is affecting your UI.

    Hope that helps a bit,

    Sebastien
     
    sebastiend-unity, Jul 6, 2022
    #2