• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
Question by MikkoK-HS · Dec 08, 2017 at 01:47 PM · uilayoutfitexpand

Fitting UI element height to content while expanding width to fill screen?

alt text

How can I accomplish this? I want to have an element that fits its height to its content and has its width expanded across the screen (canvas). I am able to do one of those things but can't figure out how to do both at the same time. I know I can expand the width with a horizontal or vertical layout group and use a content size fitter to fit the element's height to its child content but apparently these two components can't be mixed. Is there a way to do this with the gui system without writing extra code?

illustration.jpg (75.7 kB)
Comment

People who like this

0 Show 0
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

  • Sort: 
avatar image

Answer by LW · Apr 27, 2018 at 06:28 PM

This may help you:


  • Create a Canvas

  • Set the Canvas Scaler UI Scale Mode to Scale with Screen Size

  • Add a child Game Object to the Canvas

  • Set the Content Size Fitter Horizontal to Unconstrained

  • Set the Content Size Fitter Vertical to Preferred Size

  • Set the child Rect Transform Min X anchor to 0 and the Max X anchor to 1

  • Set the child Rect Transform Left and Right to 0

  • Add both a Vertical Layout Group and a Content Size Fitter to the child Game Object

  • Set the Vertical Layout Group Spacing to 4,

  • Set the Vertical Layout Group Child Controls Size Width and Height to true

  • Set the Vertical Layout Group Child Force Expand Width and Height to false

  • Add a button (or any object really) as a child of the previous game Object

  • Add a Layout Element to the newly created button

  • Set the newly created button's Layout Element Preferred Width and Height to... (e.g. 160 and 30)

  • Duplicate the button


I hope that may help you!

Comment

People who like this

0 Show 0 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image

Answer by fafase · Apr 27, 2018 at 07:12 PM

Place all your button in a container (it might be the parent object you mentioned).
Make your container with anchor min (0, 0) and max (1, 1). Set the Left. Top, Right and Bottom to 0. Now your parent box occupies the whole screen. You can also click the square icon above Anchor and then press Alt and press the bottom right icon. That will set it all to what I just described.
If you have a limited and constant amount of button, do not use a vertical layout group, it is convenient but adds computation for redrawing that you can avoid. Make them all children of the parent container object. Select them all four and set anchor min X to 0 and max X to 1. Then set left and right to 0 for all four of them.

Now comes the tricky part, for each from top to bottom set the anchors to:

  1. minY : 0.75 maxY : 1

  2. minY : 0.5 maxY : 0.75

  3. minY : 0.25 maxY : 0.5

  4. minY : 0 maxY : 0.25

If you end up with a weird amount of button like 7 of them, you can just put 1/7 then 2/7 then 3/7 and so on, unity will set the value for you. Once you set the all fine, select them all and set Top and Bottom values to 0.

This is it, they should occupy the whole width and each will use a quarter of the height. It will also rescale based on the screen dimensions, you can even change the ratio from landscape to portrait.

And it takes no additional component or code.

Comment

People who like this

0 Show 0 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Unity Answers is in Read-Only mode

Unity Answers content will be migrated to a new Community platform and we are aiming to launch a public beta by June 9. Please note, Unity Answers is now in read-only so we can prepare for the final data migration.

For more information and updates, please read our full announcement thread in the Unity Forum.

Follow this Question

Answers Answers and Comments

121 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Scroll view not resizing properly with dynamic content 0 Answers

UI LayoutGroup does not organize dynamically instantiated buttons 8 Answers

Is there a way to animate dynamic layout group changes? 2 Answers

Add glow effect around UI Layout 2 Answers

NGUI: Dynmaically change following elements postions on collapse/expand of previous element 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges