Search Unity

UIElements Stretch to fill

Discussion in 'UIElements' started by SureSight, Aug 8, 2018.

  1. SureSight

    SureSight

    Joined:
    Aug 2, 2013
    Posts:
    61
    I am creating an editor with 2 x panels. 1 x list panel (leftPanel) and 1 x node panel (rightPanel) aligned horizontally.
    I want to set the relative sizing as follows:

    • mainContainer to stretch and fill the whole editor (width and height)
    • leftPanel (child of mainContainer) to have a width of 128px and fill the remaining height in mainContainer.
    • rightPanel (child of mainContainer) to stretch and fill remaining width and height in mainContainer
    • listView (chiled of leftPanel) to stretch and fill remaining width and height of leftPanel

    Code (JavaScript):
    1. #mainContainer {
    2.         flex-direction: row;
    3.         align-self: flex-start;
    4.     padding-left: 10px;
    5.     padding-top: 10px;
    6.     background-color: rgb(128, 128, 128);
    7. }
    8.  
    9. #leftPanel {
    10.     flex-direction: column;
    11.     min-width: 128px;
    12.     background-color: rgb(0, 0, 128);
    13. }
    14.  
    15. #rightPanel {
    16.     flex: 1;
    17.     background-color: rgb(128, 128, 0);
    18. }
    I can't seem to get the panels to size properly using flex: 1 0

    What am I doing wrong?
     
  2. uDamian

    uDamian

    Unity Technologies

    Joined:
    Dec 11, 2017
    Posts:
    297
    A bit late but, try adding:
    Code (JavaScript):
    1. flex-grow: 1;
    to your #mainContainer container. Same for the #rightPanel (instead of just flex: 1).
     
  3. benoitd_unity

    benoitd_unity

    Unity Technologies

    Joined:
    Jan 2, 2018
    Posts:
    99
    FYI, we now have a dedicated sub-forums where you can use for all your questions and feedback related to UI Systems Previews.

    Cheers,