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 set width and height fillup its parent container.

Discussion in 'UI Toolkit' started by wang37921, Jan 15, 2019.

  1. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    102
    item is absolute position type,
    how to set its width and height fillup its parent container.
     
  2. vertxxyz

    vertxxyz

    Joined:
    Oct 29, 2014
    Posts:
    109
    StretchToParentSize(); is likely what you're looking for. But - you may have to use it with a callback as it sometimes fails for me, perhaps because layout hasn't yet been calculated.
     
    wang37921 likes this.
  3. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    102
    thx
     
  4. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    102
    ve.style.width = 100;
    ve.style.height = 100;
    ve.StretchToParentSize();// actually, it is setting style.positionLeft and so on

    if assign the style.width or style.height value, StretchToParentSize() will not take effect.
     
    Last edited: Jan 16, 2019
  5. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    102
    found: set ve.layout will change PositionType to manual, it will invalidate style position and flex layout system.
     
    etienne_phil_unity likes this.
  6. etienne_phil_unity

    etienne_phil_unity

    Unity Technologies

    Joined:
    Jan 15, 2019
    Posts:
    16
    As you correctly diagnosed, the preferred way to have the child fill its parent is to zero out the positionLeft|Right|Top|Bottom, as done in the StretchToParentSize method. By setting width/height, we'd actually submit conflicting constraints to the layout system :)
     
  7. wang37921

    wang37921

    Joined:
    Aug 1, 2014
    Posts:
    102
    thx, i am greens on the web layout system.

    i try many times, found that conflict.
    must use left,right,top,bottom with absolute type together.
    or, left, right, width,height.
    switch use them must invoke ResetPositionPorperties first.

    But there also include ve.layout, ve.transform...i was confuse...

    maybe more details document be friendly
     
    Last edited: Jan 17, 2019
  8. etienne_phil_unity

    etienne_phil_unity

    Unity Technologies

    Joined:
    Jan 15, 2019
    Posts:
    16
    yes, we're working on more complete documentation, this will improve as UIElements matures :)
     
  9. Rocktavious

    Rocktavious

    Joined:
    May 10, 2017
    Posts:
    44
    Hey all - so i've found 2 good methods for fill like this (that have not been mentioned)

    Code (csharp):
    1. .fill {
    2.     position: absolute;
    3.     top: 0px;
    4.     bottom: 0px;
    5.     right: 0px;
    6.     left: 0px;
    7. }
    and

    Code (csharp):
    1. .flexfill {
    2.     flex-grow: 1;
    3.     flex-shrink: 1;
    4. }