Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • 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
0
Question by Vencarii · Feb 26, 2018 at 06:08 PM · uipositioningdynamically

How can I get the top right position of a dynamically sized Panel?

I have a Panel that's positioned in the center of my scene (horizontal and vertical). I insert Buttons at runtime into the Panel. To resize the Panel depending of its content I added a Vertical Layout Group and a Content Size Fitter onto it.

This works fine, but now I want to add a close Button and try to position it at the top right corner of the panel. Any idea how I can get the position of the top right corner to position my close button accordingly?

You can see the close button (X) at the bottom of the screenshot. I tried to position it like that:

 RectTransform menuRect = menu.GetComponent<RectTransform> ();
 RectTransform closeRect = close.GetComponent<RectTransform> ();
 closeRect.position = new Vector3 (closeRect.position.x, menuRect.sizeDelta.y, closeRect.position.z);

alt text

panel-rectransform.png (59.8 kB)
Comment
Add comment
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

· Add your reply
  • Sort: 
avatar image
0
Best Answer

Answer by Vencarii · Feb 26, 2018 at 09:33 PM

This thread was a life saver, it works now! Here is the solution how (for my Panel setup see the screenshot in my comment below. The close button is aligned to the center as well with the anchors to 0,0!):

 public void ShowMovieList()
 {
     GameObject canvas = (GameObject)Instantiate (movieMenuPrefab);
     GameObject menu = canvas.transform.Find("Panel").gameObject;
     GameObject close = canvas.transform.Find("Close").gameObject;
 
     List<Movie> movies = _gameManager.GetAllMovies ();
 
     for (int i=0; i<movies.Count; i++) {
 
         // init menu item (button in my case)
         GameObject item = (GameObject) Instantiate (movieItemPrefab);
 
         // add text to button
         item.transform.Find ("MovieTitle").GetComponent<Text> ().text = movies [i].movieName + " [" + movies [i].rating + "]";
         item.transform.Find ("MoviePrice").GetComponent<Text> ().text = movies [i].price + " €";
 
         // onClick Event
         Movie tmpMovie = movies[i];
         item.GetComponent<Button> ().onClick.AddListener (() => OnClickMovieItem(tmpMovie));
 
         // add button to panel
         item.transform.SetParent (menu.transform, false);
     }
 
     RectTransform closeRect = close.GetComponent<RectTransform> ();
     RectTransform menuRect = menu.GetComponent<RectTransform> ();
 
     // with this coroutine it works!
     StartCoroutine(SetCloseButtonPosition(menuRect, closeRect));
 
     canvas.SetActive (true);
 }
 
 IEnumerator SetCloseButtonPosition(RectTransform menuRect, RectTransform closeRect)
 {
     yield return new WaitForEndOfFrame();
     closeRect.anchoredPosition = new Vector2 (menuRect.rect.width / 2, menuRect.rect.height / 2);
 }


Comment
Add comment · 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
0

Answer by Lilius · Feb 26, 2018 at 07:28 PM

I have just created a dynamically created UI that does something similiar. I don't know about your hierarchy, but I would create it like this: Panel as parent, a container (just an empty gameobject) for buttons as child. Container streched to panel size (then add layout group etc like you have done, to your container). Next your close button as child of the panel. Set the close buttons anchors to TopRight of panel. Then, if your closebuttons size is 10x10, set your close buttons posX and posY to -10 (negate the value of your size). This should position your close button to top right corner of your panel with a slight margin, you can adjust the position to your preference. If you need to adjust any of the values in code, these should do it:

         closeRect.anchorMin = new Vector2(1,1);
         closeRect.anchorMax = new Vector2(1,1);
         closeRect.anchoredPosition = new Vector2(-10,-10);
         closeRect.sizeDelta = new Vector2(10,10);
         closeRect.pivot = new Vector2(0.5f,0.5f);
Comment
Add comment · Show 1 · 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 Vencarii · Feb 26, 2018 at 09:13 PM 0
Share

Thanks for your answer, but I don't get it to work. :-/

Here is another screenshot with my current setup. I can see the height of the Panel (164 in this case) in the RectTransform component, but it's grey. $$anonymous$$y idea is to position the Close Button at menuRect.rect.height / 2...

The message in the console is from Debug.Log (menuRect.rect); It says the Panel height is 0.00 ... any idea why? Do I have to refresh the RectTransform when I added elements by script somehow?

alt text

panel-rectransform2.png (95.9 kB)

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

129 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 avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How can I set the position of a UI text? 1 Answer

Can't get an actual canvas size 1 Answer

RectTransform returning incorrect rect bounds 0 Answers

How to position input field characters inside background boxes 1 Answer

UI Positioning with decimal points 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