Search Unity

  1. Welcome to the Unity Forums! Please take the time to read our Code of Conduct to familiarize yourself with the forum rules and how to post constructively.
  2. We have updated the language to the Editor Terms based on feedback from our employees and community. Learn more.
    Dismiss Notice

Bug VisualElement: "Size - Height 100%" miscalculated on .Add()

Discussion in 'UI Toolkit' started by gtaogle, Jun 7, 2023.

  1. gtaogle

    gtaogle

    Joined:
    Jan 6, 2022
    Posts:
    18
    This has delayed a project somewhat unfortunately, attempting to make sure I was using the software correctly, but here is the gist of what seems to be happening. Version is 2022.1.23f1 for reference.

    - In the UI Builder you can place a VisualElement at the root of your VisualTree with width: 100%, height: 100%. This element will take up the whole viewport. To make sure you can see what is happening, give it a bright border like 10px red.
    - This element can be placed in a UI Document in a scene. In this case, you should see the bright border around the whole game screen when you play, as expected.
    - Instead of attaching the VisualTreeAsset in the inspector, you can also get a reference to your UI document in a script attached to an object in the scene and attach it that way. In this case, we create two public member variables in the class, one for our UIDocument and another for our VisualTreeAsset. After placing a reference to our UI Document and VisualTreeAsset in those variables in the inspector, on Start() we can initialize() to get a VisualElement and Add() the VisualElement to our UIDocument's root visual element.
    - However, when we play the game, I notice that attaching the VisualTreeAsset this way does NOT calculate the height correctly, although the width does stay properly locked to 100%.

    I tried some workarounds, but at least as concerns an element that is supposed to span the whole height of the screen (or more correctly: the game viewport(!)) at the given version there's no way to achieve this without creating multiple UI Documents. I suspect this is because geometry is initialized differently when the VisualTreeAsset is attached to the UIDocument directly in the inspector to when it is attached to another object and initialized later. It might be that initializing it independent of the UI Document isn't consistently applying the Panel Settings - I do not know the source code here so I am only speculating.

    Some notes:
    - I've tooled around with putting the rules in a USS document and either attaching that document in the UI Builder or through the stylesheets in the UI Document - other rules get applied normally, but the height 100% rule isn't.
    - fixed heights in pixels seem to work fine, but are not workable (for obvious reasons!)
    - I changed panel settings to scale with screen size, although this didn't seem to change anything for the UI toolkit (it made a different for canvases!)
    - A workaround is to take an element (such as the body element I've specified) and give it a height based on screen resolution using VisualElement.style.height. This works well enough, though obviously it requires a little complication, requiring me to attach a script to my UI Document object that stores the current VisualTreeElement's body, if there is one that is supposed to take up the whole screen, and resize it when the screen resizes.

    Unsure if this issue has been fixed in a more recent version. If so, I will probably upgrade; however, I like to avoid doing so without reason as it sometimes breaks working things.

    Cheers!
     
  2. spiney199

    spiney199

    Joined:
    Feb 11, 2021
    Posts:
    6,015
    Just set the visual element's flex-grow property to 1.
     
  3. gtaogle

    gtaogle

    Joined:
    Jan 6, 2022
    Posts:
    18
    Doesn't work, size is wrong for the element if it has been Add()-ed to the UI Document.
     
  4. huwp

    huwp

    Joined:
    May 22, 2013
    Posts:
    33
    If you are attaching to the document root directly (replacing the root template container):

    Delete any of the width/height styles
    Add the class "unity-ui-document__root"

    That should give it the correct behavior.
     
    gtaogle likes this.