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. Unite 2023 Registrations are now LIVE! We are thrilled to announce that Unite 2023 Registration is now live and open for all!
    Dismiss Notice
New Forum User Notice Unite 2023 Registrations are now LIVE!

Bug CSS vs. USS: Unexpected grow behavior

Discussion in 'UI Toolkit' started by seyfe, Apr 4, 2023.

  1. seyfe

    seyfe

    Joined:
    May 10, 2019
    Posts:
    74
    I noticed that the expansion behavior of VisualElements in UIToolkit is not the same as for div elements in html.

    Compare the following two code snippets:

    Code (UXML):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    2.     <ui:VisualElement style="flex-grow: 1; background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; align-items: center; justify-content: center;">
    3.         <ui:VisualElement style="background-color: rgba(0, 0, 0, 0); height: 1px; justify-content: center; align-items: center;">
    4.             <ui:VisualElement style="padding-left: 50px; padding-right: 50px; padding-top: 50px; padding-bottom: 50px; flex-shrink: 0;">
    5.                 <ui:VisualElement name="expand-to-child-size" style="justify-content: center; flex-shrink: 0;">
    6.                     <ui:VisualElement style="width: 100px; height: 100px; background-color: rgba(192, 190, 190, 0.55); flex-shrink: 0;" />
    7.                 </ui:VisualElement>
    8.             </ui:VisualElement>
    9.         </ui:VisualElement>
    10.     </ui:VisualElement>
    11. </ui:UXML>
    and the html page

    Code (html):
    1. <html>
    2. <body>
    3.     <div style="display:flex; flex-grow: 1; background-color: rgba(0, 0, 0, 0); width: 100%; height: 100%; align-items: center; justify-content: center;">
    4.         <div style="display:flex; background-color: rgba(0, 0, 0, 0); height: 1px; justify-content: center; align-items: center;">
    5.             <div style="display:flex; padding: 50px; flex-shrink: 0;">
    6.                 <div id="expand-to-child-size" style="display:flex; justify-content: center; flex-shrink: 0;">
    7.                     <div style="display:flex; width: 100px; height: 100px; background-color: rgba(192, 190, 190, 0.55); flex-shrink: 0;"></div>
    8.                 </div>
    9.             </div>
    10.         </div>
    11.     </div>
    12. </body>
    13. </html>
    I would expect the element identified by 
    #expand-to-child-size
    to grow to its child size (100px x 100px) as it does using CSS. However the VisualElement does not grow. What is the workaround here to achieve the same behavior?
     
    seyfe, Apr 4, 2023
    #1

  2. spaceemotion

    spaceemotion

    Joined:
    Sep 29, 2015
    Posts:
    95
    Which element are you referring to when you say "it does not grow"?

    I noticed a similar issue, in which my outer most VisualElement does not take up the full screen size, even with "flex-grow:1" specified. This is in a project using 2023.2.0a8, and research showed that prior versions of unity did not have seem to this issue.

    Have your tested your snippet on multiple unity versions yet?
     
    spaceemotion, Apr 4, 2023
    #2

  3. seyfe

    seyfe

    Joined:
    May 10, 2019
    Posts:
    74
    The one with id/name `expand-to-child-size` should be as large as its child. "grow" was not meant in the sense of `flex-grow`.

    I tested this with 22.2.10 and 23.1.0b
     
    seyfe, Apr 4, 2023
    #3