Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

How to get two visual elements to fill their parent container?

Discussion in 'UI Toolkit' started by Pelican_7, Apr 18, 2019.

  1. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    190
    In the visual element hierarchy below, how can I get the two .myContainer sibling elements to fill their parent container?

    -- VisualElement #rootVisualContainer
    -------- VisualElement .myContainer
    ---------------- VisualElement #someContent....
    -------- VisualElement .myContainer
    ---------------- VisualElement #someContent....

    The reason is that the second container contains a second content view, presented as an overlay above the first content container.

    I believe I want to disable flex layout (to prevent them being resized to both fit into the parent) and do something like...
    Code (CSharp):
    1. .myContainer
    2. {
    3.     width: 100%;
    4.     height: 100%;
    5.     flex-grow: 0;
    6.     flex-shrink: 0;
    7. }
    ... but I can't find a way to set the width/height as percentages of the parent.

    Thanks.
     
  2. jonathanma_unity

    jonathanma_unity

    Unity Technologies

    Joined:
    Jan 7, 2019
    Posts:
    229
    Hi,

    The only supported unit is px at the moment so it's not possible to use %.
    If you want an element to take the size of it's parent you can use flex or do this instead :

    Code (CSharp):
    1. .stretch
    2. {
    3.     position: absolute;
    4.     left: 0;
    5.     top: 0;
    6.     right: 0;
    7.     bottom: 0;
    8. }
     
  3. Pelican_7

    Pelican_7

    Joined:
    Nov 25, 2014
    Posts:
    190
    Thanks!