Grid won't resize the parent control

Hi there,

I have a problem where I use a ScrollRect that scrolls a Panel.
The panel has a Grid script attached to it. The panel has a dynamic number of children. Therefore its height will always be different.

The Grid script will stack em up real nice one after the other, but it won't resize the panel itself, it will simply overflow.

The bad news are that the panel (that holds the grid) won't be scrollable because its size never changes. Its size always remain as the initial size.

As a workaround, I can change the size of the Panel to some real big value and then it will always be scrollable, but there will be always some blank spots at the bottom. That's not the way to go.

Please let me know if you don't understand the problem,
I'm probably doing something wrong here.

Thanks!
Lidan

 

What you want is a scrollable script on a parent object. Then add a child to the scrollable object. That child then contains the grid script and you put your items in that one. This should automagically make the panel above it scrollable as the grid resizes with the added content.

You will probably need to add a mask to the scroll view object as well to clip the contents properly.

So basically the hierarchy should be :

Scroll View Object
- Grid Object
-- Items

 

Thanks for your reply,

The hierarchy that you mentioned is exactly how I implemented it on my side.

This does not happen for me. The Grid adds the items and they appear to overflow, and won't resize the Grid. Are you sure it supposed to resize?

Thanks!

 

To make a grid resize with the content, add a ContentSizeFitter component to it and set it to resize to preferred size vertically.

 

Hi,

Thanks for your reply.

ContentSizeFitter always screws up the UI. It seems like whenever I switch it to "preferred" it shrinks all the UI elements and they become invisible.

Please see the attached example, the button will items to the grid, you won't be able to see the grid from around item 9 (because of the fixed hight of the grid).

I must be doing something wrong. Please try to add the ContentSizeFitter and see what happens.

Thank you,
Lidan Hackmon

 

Yeah, I added a ContentSizeFitter to the container in the sample and it breaks it; doesn't work.

 

Same issue here. I have to manually get the value of the scrollbar and move the parent objects localPosition.y using the dynamic directoryHeight equaling the number of rows * the height of each grid cell

Code (JavaScript):

1. //find the total distance before the last file shows at the bottom of the directory window
2. var scrollDist = (directoryHeight - 430) * scrollbar.value;
3. directoryContent.localPosition.y = scrollDist - 215;

 

What I'm seeing: When I add a ContentSizeFitter and set Vertical Fit to PreferredSize, the rect becomes too smal, yes. This seems to be because the width of the rect is not wide enough to contain a single element, and so the grid calculates that there is room for 0 elements and sets the height very small as a result.

We'll fix this so that the calculation of the vertical number of cells assumes always that there's always at least 1 cell width horizontally even if there technically isn't.

For now you can fix the issue by making the rectangle of the grid wide enough to fit the element width you've specified.

 

Thanks!

It works now, thanks for the workaround.
BTW: I want to set the X Cell Size of the Grid to 0 so that every item will be placed in a new row.
Right now I have to insert a number over there.. (for the workaround) I need to think about how to calculate that number.

Will the fix work for 0 X Cell Size padding?

Thanks,
Lidan

 

I'm having a hard time understanding. Could someone make and post a sample app with a working example of a dynamic list inside a scroll rect?

 

Sure thing,

Here is the working demo I made.
You should see how the grid resizes vertically when you add lots of items. You will be able to scroll vertically and horizontally.

Thanks,
Lidan Hackmon.

 

Lidanh, you are amazing. Thank you!

 

I've been playing with some of the settings, but I can't seem to get the contents of the grid view to anchor anywhere. It centers the contents wherever the grid component is located. I'd prefer it to be anchored instead of centered. Anyone have any tips?

Also, the grid component is difficult to position with a ContentSizeFitter on it. It shrinks down to a tiny line, and you can only really manipulate it indirectly via the Rec Transform settings. This is cumbersome, unless it's not meant to be manipulated at all.

 

Unsure if I'm simply missing something obvious, but no matter what I do, I can't get the above setup to expand the parent horizontally. Vertically seems to work fine (the parent rect height changes accordingly as I add items to the grid), but nothing horizontally, even with min or preferred size set. In fact, unless I use Unconstrained and I manually set the width, content fitter always insists on cramming the grid into a single column.

Am I missing something?

 

LoTekK, I am experiencing the same problem with horizontal layout not working.

 

Same thing here. I gave up and made a pager that move the content's localPosition.y

 

I've made some changes to how the GridLayoutGroup works that should address this (contents being able to expand horizontally). It didn't make it for beta 18, but should be included with beta 19.

 

Thanks!

Could one of you awesome Unity peeps update the sample app to include a dynamic vertical and horizontal non-centered list for b19?

 

We're working very hard just to fix bugs, write documentation, and answer forum posts here. I think we won't have major changes to the sample project for a little while. However, there's already threads where community members have created sample projects with various dynamic content. I would suggest to draw on those for now.

 

Thank you, that actually made it work. Now the panel automagically resizes with programmatically added buttons (or whatever UI element you chose). Especially the "Preferred Size" on the content fitter is important, as this is the only setting which makes it work.

(even though I don't fully understand why, because I never set any "Preferred Size" anywhere. Maybe it should be declared more clearly at what point something counts as "Preferred Size").

 

This still doesn't work for horizontal. I would say it is a bug as it clearly works fine for vertical.

 

This worked for vertical.

 

For anyone still having trouble, please carefully read the documentation, especially noting the constraint and constraintCount properties:
http://docs.unity3d.com/Manual/script-GridLayoutGroup.html

 

I am having trouble with the contentfittersize but it is not with a grid layout. I have a vertical layout group and am experiencing the same. I have Unity version 5.1.1f1 Personal if it matters/helps Mainly it shrinks the toggle text down to nothing. It is the same symptoms/problems. If needed I can go into more detail about my hierarchy. With this being an older issue I didn't know if I should make a new thread because of necro'ing or if it was proper to post here.

 

Put a LayoutElement in the toggle and set the min width/height.

 

I would like to not have to set the minimum width of anything as I'm going to be working with multiple resolutions. Is there another way you know of? And thanks for the quick reply!

 

Well, you can also use the LayoutElement to set preferred width/height instead of minimum, but it will just mean the toggles might become too small in some cases.

Handling multiple resolutions down at the level of individual controls is not a recommended way to go since it creates lots of problems. Use CanvasScaler instead, as described here:
http://docs.unity3d.com/Manual/HOWTO-UIMultiResolution.html

 

I agree that isn't the way to go. I'm trying to avoid minimum height or max height or preferred height to any constant at all. There have been a couple of times where I have had to. I ended up making a custom object as a workaround. Since I am creating these items dynamically minimum height etc isn't feasible as I don't have a clue how many I will have.

 

I am like 8 years late to the party, but I was struggling with this problem.

If you want the content size fitter to not F*** up the UI try changing the pivot point. It might just lock everything to the top and content doesn't move around

 

https://docs.unity3d.com/kr/2017.4/Manual/script-ContentSizeFitter.html

 

Guys, no code & works like a charm for vertical dynamic content in Scroll View.
https://unitycoder.com/blog/2016/02/23/ui-scroll-view-automatic-content-height/

Should also work for horizontal as well.

 

Hi,
I have a similar but not completely same issue.The working demo is kind of doing that, but it's not resizing its parent object until a certain height.

Look at my rather unprofessional visualization. When you look at the picture from left to right. I have an UI which is increasing it's height depending on how many items the scrollview contains. I achieved that and its working fine. What I'm not able to do is setting a maximum value for the height and "activate" the scrollview. I need that so the UI is not bigger than the screen.

I hope I explained it well and also hope that somebody has a tip or solution for that. Thank you so much

 

So I figured it out.
I set it up like this: ScrollRect -> Content (with Horizontal layout Group and Content Size Fitter) -> Items

After adding the items I set resulting height of the content-GO(the parent of the items) as the height of the ScrollView-GO ( the one with the Scroll-Rect attached). When the height of the Content-GO goes beyond a certain value(in my case 700), I set the ScrollView only to that value and the scrollview becomes active.

The final trick is to get the height of the content GO you need to do "Canvas.ForceUpdateCanvases();". Without that you always get 0.

See code below:


Canvas.ForceUpdateCanvases();
RectTransform rt = Content.GetComponent<RectTransform>();

float height = rt.rect.size.y;

if (height < 700)
{
ScrollView.sizeDelta = new Vector2(ScrollView.sizeDelta.x, height);
}
else
{
ScrollView.sizeDelta = new Vector2(ScrollView.sizeDelta.x, 700f);
}

 

why isn't this right at the start of the manual page on scroll rects!?!?!. Thanks!

 

Hello~ I got this working for Horizontal

Needed no code
Unity v.2019.2.8f1


Scroll rect is on another object


Pivot 0,0 makes it expand only to the right.
The default was pivot 0.5,0.5, which made it expand left and right.

 

Thanks Mate It Worked!!