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

Fill empty space in parent in UI Layout

Discussion in 'UGUI & TextMesh Pro' started by dadude123, Jan 23, 2017.

  1. dadude123

    dadude123

    Joined:
    Feb 26, 2014
    Posts:
    789
    An image says more than a thousand words :) so...

    I have a horizontal Panel with 3 elements in it.

    • The first Panel should be aligned to the left side and have a fixed width.

    • The last Panel should be aligned to the right side and have a fixed width.

    • The middel Panel should fill the remaining space in the center
    . I tried a long time but unfortunately I can't get it to work. I have a hard time beleiving that something so simple is hard (or maybe even impossible?) in unitys UI System.


    I know that this can be accomplished when setting all the values explicitly, but that won't allow me to easily change the padding, resize the first or last block, ... so I would like to know what the correct way of doing this is.
     
  2. mikael_juhala

    mikael_juhala

    Joined:
    Mar 9, 2015
    Posts:
    247
    I got it working with the following setup (in Unity 5.5.0p3):
    • In the layout, enable both width and height in Child Control Size
    • In the layout, enable only height in Child Force Expand
    • Add LayoutElement to the first and last panel and set Preferred Width to 60
    • Add LayoutElement to the middle panel and set Flexible Width to 1
     
  3. dadude123

    dadude123

    Joined:
    Feb 26, 2014
    Posts:
    789
    That works perfectly, thank you so much!

    If anyone is reading this and wondering why it doesn't seem to work: The part where *Child Force Expand* is unchecked is important (width).

    You don't want the Layout Group to force a specific width, because it will calculate 1/3.
    If you don't force child expand width, it will work perfectly.
     
    EZaca and Norems like this.
  4. plasticYoda

    plasticYoda

    Joined:
    Aug 20, 2013
    Posts:
    62
    The key for me was not to specify a Min Width and a Preferred Width on the fixed width items, and give all the items the same priority value.
     
  5. Daevin

    Daevin

    Joined:
    Jun 1, 2017
    Posts:
    11
    I hate to revive the thread, but...

    What I'm trying to do is sort of exactly the same, but sort of the opposite. I want the center piece to be "fixed", and the side pieces to fill the available real estate. What I want is this:

    klrixw8.png

    but what I'm getting is this, with the side pieces overlapping the center image:
    Screenshot_20181011-104801.png Screenshot_20181011-104819.png

    Each of the 3 items are RawImage objects inside of a wrapping "empty" GameObject that is inside the canvas.

    Can anyone help? No matter what I've tried tweaking, nothing works, even though the Unity preview looks like this (which is what I want, no overlapping):
    screen.png
     
  6. Antistone

    Antistone

    Joined:
    Feb 22, 2014
    Posts:
    2,836
    Trying to control the width of your middle panel with both a LayoutElement and an AspectRatioFitter at the same time seems like it might be problematic, since the Preferred Width/Height on the LayoutElement won't reflect the actual width you want.

    Rather than using an AspectRatioFitter, what if you wrote your own script to change the Preferred Width/Height of the center panel dynamically based on the dimensions of the parent? (You can use OnRectTransformDimensionsChange so that you don't have to recalculate every frame.)
     
    SherpaDev likes this.
  7. a436t4ataf

    a436t4ataf

    Joined:
    May 19, 2013
    Posts:
    1,924
    I had a simliar problem today, gave up, and wrote a custom LayoutGroup (you implement ILayoutGroup - it only has two methods).

    Works perfectly. I cannot understand why Unity still hasn't fixed the bugs in their layoutgroups - it only took a few hours for me to completely rewrite the layoutgroup classes in a way that works every time :(.
     
    ammirea likes this.
  8. karsnen

    karsnen

    Joined:
    Feb 9, 2014
    Posts:
    65
    Dude, this saved so much time. Thank you buddy.
     
    malek8 likes this.
  9. ManuelRauber

    ManuelRauber

    Joined:
    Apr 3, 2015
    Posts:
    122
    Hi,

    unfortunately, I have to revive this old thread.

    I'm trying to do the same as the thread starter, but with Unity 2020.1.1f1. The setup is the exact same.

    However, it only works, if I do not have a child element the first or last element.
    Whenever I drop an empty game object into the first element, the size will be twice the size of the preferred width.

    upload_2020-8-12_21-17-42.png

    If I remove headline and input, it works well. If I then drop another object in it (and it can be an empty game object), it expands.

    I have to say, that on the SessionId element, I have a vertical layout group with this settings:

    upload_2020-8-12_21-18-59.png

    Any idea, why this is happening?
     
  10. obywan

    obywan

    Joined:
    Jan 18, 2014
    Posts:
    8
    Pretty late relay, but maybe someone else will be looking for an answer. I had a similar issue.
    This is kind of shady workaround, but it works: set not 1, but big number for
    Flexible Height
    value. 800 worked for me
     
    kenmountains likes this.
  11. EZaca

    EZaca

    Joined:
    Dec 9, 2017
    Posts:
    32
    I was in the same situation with three items (header, body, footer), but in a vertical layout. It always expands the three items, ignoring the layout elements (it was not set to ignore them). I just gave up and used anchors.
     
  12. nucleartide

    nucleartide

    Joined:
    Jun 15, 2012
    Posts:
    16
    If you're having trouble with the vertical layout, remember to uncheck "Child Force Expand" in the parent Vertical Layout Group. (See attached screenshot.)
     

    Attached Files:

    EZaca and WalterPalladino like this.
  13. Bugges

    Bugges

    Joined:
    Mar 9, 2019
    Posts:
    9
    In step three also set Flexible Width to 0.