Search Unity

  1. Unity 2018.3 is now released.
    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. Want more efficiency in your development work? Sign up to receive weekly tech and creative know-how from Unity experts.
    Dismiss Notice
  4. Build games and experiences that can load instantly and without install. Explore the Project Tiny Preview today!
    Dismiss Notice
  5. Nominations have been announced for this years Unity Awards. Celebrate the wonderful projects made by your peers this year and get voting! Vote here!
    Dismiss Notice
  6. Want to provide direct feedback to the Unity team? Join the Unity Advisory Panel.
    Dismiss Notice
  7. Improve your Unity skills with a certified instructor in a private, interactive classroom. Watch the overview now.
    Dismiss Notice

Fill empty space in parent in UI Layout

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

  1. dadude123

    dadude123

    Joined:
    Feb 26, 2014
    Posts:
    701
    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

    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
     
    SomeVVhIteGuy, SimRuJ, Destr and 4 others like this.
  3. dadude123

    dadude123

    Joined:
    Feb 26, 2014
    Posts:
    701
    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

    plasticYoda

    Joined:
    Aug 20, 2013
    Posts:
    57
    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:
    8
    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:
    517
    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.