- Home /
How to set UI Rect Scroll for dynamically growing content?
Could anyone kindly guide, how to use UI Rect Scroll for a content that might grown dynamically by adding content after a web service call or with respect to some button response by the user in game interface.
Following the tutorial available on Unity website, it show how to scroll an image which is greater in size than the scroll rect, but how to get this setup working for stuffs that might be added to the panel later in game or runtime, which will increase in height or width but still the scroll will reflect to the old height or width, rather than the new dimensions.
Kindly have a look at following image.
Could anyone guide me on this front.
Humble Regards, Sharat Achary
Answer by masoudarvishian · Jun 18, 2017 at 01:08 AM
This link solved my problem, I'm sure it helps you too.
Thanks this is the best solution because it does not require code to calculate the size.
THAN$$anonymous$$ YOU!!! i had no idea this simple component “Content Size Fitter” existed, that solved my problem
Answer by KuR5 · Jun 06, 2016 at 07:26 AM
Find the attached demo. You can add objects under "Grid-Dynamic" gameobject dynamically and scrolling works fine.
I sent you some rep. This comment seriously made my day. I've been fighting with the ScrollRect forever and never had a good solution.
Thanks @SniperEvan, It is great that demo is being helpful to you.
Hi, I need this too but I can't get the attached project to open...
i have tried several time but no zip file download can you send it to me?
Answer by Mmmpies · Dec 07, 2014 at 10:00 AM
Think you need to add Component Content SizeFilter and set it to unrestrained
EDIT:
Well that's what I get for not checking my own menu item. BoredMormon is right you have to set the RectTransform to dynamically increase in size with enough for each item that you include.
In my case that's just vertical but it could be both.
See RectTransform.OffSetMax and RectTransform.OffSetMin
get the count of how many items are being loaded and multiply that by the how many times you're going to increase the x and y.
Not written the code to fix mine yet but if you're struggling I'll post the solution when I have it.
You actually want to constrain it on the vertical. Also add layout elements to each button. Check out my UI tutorials for a video. It's not exactly what you are after, but you should be able to figure out all the pieces.
Check out this video as well:
I added the demo unity package to it under CursedIsle username to show how to build menu items from a list. As I say on the YouTube comments virus check and open in a new project so I don't break anything you've done. It was virus free when it left me but I can't be 100% sure of that once it's on the web.
Oh and follow both Stuart Spence and Richard Gubb on Youtube both well worth following.
Answer by hghammoud · Jan 22, 2017 at 12:21 AM
I spent a lot of time to solve this issue. I tried every proposed solution on the web. None of them gave me the result i needed. I ended up calculating the height via a Script (MonoBehavior).
My aim was to calculate a 2D RectTransform (ScrollContent) that has children populated dynamically using the start() so the script executes once on update() after all has been initialized.
I added this to all the component with dynamic height and the scroll content.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class ScrollExpander : MonoBehaviour {
private bool _updated = false;
// Use this for initialization
void Update () {
if (!_updated) {
RectTransform rectTransform = (RectTransform)transform;
float yMin = 0.0f;
float yMax = 0.0f;
foreach (RectTransform child in transform) {
yMin = Mathf.Min (yMin, child.offsetMin.y);
yMax = Mathf.Max (yMax, child.offsetMax.y);
}
float finalSize = yMax - yMin;
rectTransform.sizeDelta = new Vector2 (rectTransform.sizeDelta.x, finalSize);
_updated = true;
}
}
}
Hope this helps some with this problem.
Answer by nishant619 · Jul 11, 2017 at 10:36 AM
Create a scroll view (right click > UI > Scroll View)
Select Content, add Content Size Fitter component.
Change the settings of both Content Size Fitter and Rect Transform like in the image below.
Through your own script add text to Text component (dynamically).
Text myText = this.transform.GetComponent<Text>(); myText.text += "your desired text";
You're example won't work properly without the addition of a VerticalLayoutGroup to the Content object.
You would also need to select Control Child Size Height on the VerticalLayoutGroup to make the Text component and Content area automatically resize to fit the text.
Content Size Fitter is doing what u are asking. It's taking the preferred size from Text component and increasing size every time there is a new line in Text.text. $$anonymous$$y example is tested and works great.
Oh I see what you've done, you've added a text component directly to the content gameobject, in which case it will work as you stated.
I prefer adding text objects as children of the content gameobject, as this gives the flexibility of being able to add multiple text objects or even other UI elements. In which case the verticallayoutgroup is required as I described.
This worked perfectly as is in your example, thanks so much for posting this!
Even in Unity 2021.1.24f1 you still have to add the Content Size Fitter manually to the Content (weird that it doesn't do it by default) but then it changes size accordingly. If you want to add multiple elements, I'd also recommend adding a Vertical or Horizontal Layout Group to align them properly (default: Control Child Size/Child Force Expand: Width). Btw, if the Scroll View itself is part of a Layout Group, then you can add a "Layout Element" component to it and it won't interfere.