Search Unity

VisualElements won't grow to fill space for some reason

Discussion in 'UIElements' started by mikevargas, Oct 12, 2019 at 9:00 PM.

  1. mikevargas

    mikevargas

    Joined:
    Aug 17, 2019
    Posts:
    12
    (First of all, yes, I've read all the documentation and flex-box reference multiple times.)

    I have two empty, plain VisualElement objects. Their parent is a simple container VisualElement with display:flex and flex-direction:column. In other words, I just want to stack two VisualElements on top of each other and have them fill all available space.

    I've set the flex-grow of the child VisualElements each to 1 and the flex-shrink of each to 0. These elements are contained within a custom EditorWindow which contains no other elements, i.e. it's:

    rootVisualContainer
    parentFlexContainer (VisualElement, flex-direction:column)
    flexItem1 (VisualElement, flex-grow:1, flex-shrink:0, width/height:auto)
    flexItem2 (VisualElement, flex-grow:1, flex-shrink:0, width/height:auto)


    The width and height of flexItem1 and 2 are 'auto'.

    Everything I understand about flex layout tells me that, given this hierarchy, flexItem1 and flexItem2 should fill the EditorWindow in such a way that they each take up half the vertical space of the window, i.e. the bounds should look like:

    visualelementlayouts.png

    But they don't. Instead, they don't take up any space whatsoever, despite their flex-grow properties and width/height set to auto.

    Is this a bug, or am I fundamentally misunderstanding flex layout?
     
  2. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,334
    It may be an issue with the parent not having any height. So on your parent style use this:

    Code (CSharp):
    1. .stretch {
    2.     position-type: absolute;
    3.     position-left: 0;
    4.     position-top: 0;
    5.     position-right: 0;
    6.     position-bottom: 0;
    7. }
    8.  
    9. <VisualElement class="parent-container stretch">
    10.     <VisualElement class="child1"></VisualElement>
    11.     <VisualElement class="child2"></VisualElement>
    12. </VisualElement>
    Or just add the stretch styles into the parent css.

    I always use that to make the equivalent of the HTML 'body' tag.

    'display: flex', 'flex-direction: column' on the parent and 'flex-grow: 1' on both children should be enough. Remove all other settings such as width/height/shrink.

    If it doesn't work, try adding 'align-items: stretch' and 'align-content: stretch' on the parent too.
     
  3. mikevargas

    mikevargas

    Joined:
    Aug 17, 2019
    Posts:
    12
    Somehow that worked, thank you. Unfortunately I was using this to try to resolve a more specific issue, which doesn't seem to be remedied by it. Specifically, all I am trying to do is get an Image to align to the top of the EditorWindow. This image scales uniformly as the window is resized, which is ideal, but for some reason I can't get the actual Image to be placed at the top of the window. Further, the bounds of the Image's VisualElement don't seem to be the same as the bounds of the image and that seems to be what causes the problem.

    My original thinking was that I could place the Image as the top VisualElement in a flex container and put some spacer VisualElement below it, which, when setting flexGrow to 1 on the bottom element, should push the Image up to the top if the Image had a flexGrow of 0 and a flexShrink of 1. No luck, though.

    Anyway, this sounds like a sufficiently different issue that I may make a new question for it. I really appreciate your help as this is another issue I have faced in many forms.
     
  4. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,334
    Are you using an Image tag or using background-image CSS? Using background-image should keep it inside.
     
  5. mikevargas

    mikevargas

    Joined:
    Aug 17, 2019
    Posts:
    12
    I'm doing this all in code, and the image URL will regularly change so I couldn't hard-code it in CSS (er, USS).
     
  6. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    295
    Your parentFlexContainer should also have flex-grow: 1. The children are trying to take up all available space, but the parent will have 0 height. This is because of the default align styles of the rootVisualElement.