Search Unity

  1. Unity 2019.1 is now released.
    Dismiss Notice

Fill empty space in parent in UI Layout

Discussion in 'Unity UI (uGUI) & TextMesh Pro' started by dadude123, Jan 23, 2017.

  1. dadude123


    Feb 26, 2014
    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.
    EvansT likes this.
  2. mikael_juhala


    Mar 9, 2015
    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


    Feb 26, 2014
    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.
    Norems likes this.
  4. plasticYoda


    Aug 20, 2013
    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


    Jun 1, 2017
    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:


    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):
  6. Antistone


    Feb 22, 2014
    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


    May 19, 2013
    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 :(.