Search Unity

  1. Improved Prefab workflow (includes Nested Prefabs!), 2D isometric Tilemap and more! Get the 2018.3 Beta now.
    Dismiss Notice
  2. The Unity Pro & Visual Studio Professional Bundle gives you the tools you need to develop faster & collaborate more efficiently. Learn more.
    Dismiss Notice
  3. Let us know a bit about your interests, and if you'd like to become more directly involved. Take our survey!
    Dismiss Notice
  4. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice

Fill empty space in parent in UI Layout

Discussion in 'Unity UI & 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
    SomeVVhIteGuy, SimRuJ, Destr and 4 others like this.
  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.