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!

Question Question: Is it possible for visual element to match size of it's children? (wrap content)

Discussion in 'UI Toolkit' started by somefsafa, May 21, 2021.

  1. somefsafa

    somefsafa

    Joined:
    Nov 5, 2013
    Posts:
    2
    Dear Unity Community,

    I've been trying the UI Toolkit and it's all fine but I've been unable to make elements match width of their children.

    If I set the parent's width and height to auto, only the height is correct, but the width is always stretched to all available space instead of matching it's children's width.

    I am able to achieve what I want here https://yogalayout.com/playground by just setting the parent element's width to auto instead of a fixed amount.

    Do you know if the same thing is possible in Unity's UI toolkit?




    Kind regards,

    Adam
     
    somefsafa, May 21, 2021
    #1

  2. somefsafa

    somefsafa

    Joined:
    Nov 5, 2013
    Posts:
    2
    Hmm, seems to work by setting the parent's position absolute, so I guess the question is answered.
     
    somefsafa, May 21, 2021
    #2

  3. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    384
    Setting the parent's position to absolute, means it get removed from the parent's parent flex layouting. To control how flex handles the size of children along the cross-axis (width for a column direction, height for flex-direction: row), you can use 2 different properties:
    align-items: set on a parent, it defaults to stretch, so children will take all the available space of the parent's container. setting align-items to flex-start, center, or anything else than stretch will give you want you want.
    align-self: set on a child, it will override how the parent assign size along the cross axis.

    Remember that your root element of your uxml eventually gets added to an already existing hierarchy so itself gets driven by its parent's layout parameters.

    Hope that helps
     
    uMathieu, May 21, 2021
    #3

  4. Lurking-Ninja

    Lurking-Ninja

    Joined:
    Jan 20, 2015
    Posts:
    9,904
    Sorry, but I think you misunderstood the question. The op wanted to give dynamic size to the parent based on the size of its children, not the other way around. So removing the element from the influence of its parent is the valid answer.
     
    Lurking-Ninja, May 21, 2021
    #4
    Fafy2801 likes this.

  5. uMathieu

    uMathieu

    Unity Technologies

    Joined:
    Jun 6, 2017
    Posts:
    384
    Re-reading my answer, you're right, it was a bit obtuse.

    Sometimes you still need want your overall to be layout done by the parent and setting position: absolute is not the way to go. In these cases, setting align-self to center or anything else than stretch on this uxml root would give the desired result, as your width would be driven by the children sizes and not by the parent's own width.
    Setting align-items on the element that will end up being this uxml root parent would do the trick as well.
     
    uMathieu, May 22, 2021
    #5
    blisz likes this.

  6. razamgar

    razamgar

    Joined:
    Apr 7, 2020
    Posts:
    14
    Thank you for responding @uMathieu and apologies for a necro-bump. I've plastered this entire code sample with 
    align-self: flex-start;
    , but no luck - the orange (well, orange-ish) container is wider than its children. Did I miss something?

    Code (UXML):
    1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.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 name="FixedWidthParent" style="background-color: rgba(0, 0, 0, 0); width: 470px; align-self: flex-start; align-items: flex-start;">
    3.         <ui:VisualElement name="Root" style="background-color: rgb(180, 135, 16); flex-direction: row; flex-wrap: wrap; align-self: flex-start; align-items: flex-start;">
    4.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    5.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    6.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    7.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    8.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    9.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    10.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    11.             <ui:VisualElement name="Entry" style="background-color: rgb(197, 55, 55); width: 64px; height: 64px; border-left-color: rgb(32, 136, 231); border-right-color: rgb(32, 136, 231); border-top-color: rgb(32, 136, 231); border-bottom-color: rgb(32, 136, 231); border-right-width: 2px; border-left-width: 2px; border-top-width: 2px; border-bottom-width: 2px; align-self: flex-start;" />
    12.         </ui:VisualElement>
    13.     </ui:VisualElement>
    14. </ui:UXML>
    I feel like I'm going to have to use GeometryChangedEvent, but I'm hoping I just misunderstood something.

    ChatGPT suggested I use 
    width: fit-content;
    . Little did it know that it is not a thing in USS - got a 
    Trying to read value of type Dimension while reading a value of type Enum
    error when manually specifying in UXML.
     
    Last edited: May 11, 2023
    razamgar, May 11, 2023
    #6

  7. razamgar

    razamgar

    Joined:
    Apr 7, 2020
    Posts:
    14
    Late June bump... I see that @JuliaP_Unity is quite active in this subforum, maybe they have got an idea?
     
    razamgar, Jun 26, 2023
    #7

  8. razamgar

    razamgar

    Joined:
    Apr 7, 2020
    Posts:
    14
    August bump. Let's see if pinging @uDamian will land me in trouble.
     
    razamgar, Aug 4, 2023
    #8

  9. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    You've defined its width to be 470px, you get 470px, what else did you expect?
     
    dlorre, Aug 4, 2023
    #9

  10. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    You have 8 items of 64px width, that makes 512px width, but it's limited by this 470px container. So, root cannot be larger than 470px. If you set FixedWidthParent to >= 512px for example1024 then root will get the proper 512px width.
     
    dlorre, Aug 4, 2023
    #10

  11. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    I don't understand anything I just told you what I see.

    upload_2023-8-4_13-58-31.png

    upload_2023-8-4_13-58-46.png
     
    dlorre, Aug 4, 2023
    #11

  12. razamgar

    razamgar

    Joined:
    Apr 7, 2020
    Posts:
    14
    Yes, that is precisely the problem, so please, can you stop spamming the thread if you don't understand the matter?

    I'll clean up my desperate attempts at guiding you as they don't add value other than making it harder to reach the actual question.
     
    Last edited: Aug 4, 2023
    razamgar, Aug 4, 2023
    #12

  13. dlorre

    dlorre

    Joined:
    Apr 12, 2020
    Posts:
    700
    Code (csharp):
    1.  
    2. flex-wrap: no-wrap
    3.  
     
    dlorre, Aug 4, 2023
    #13