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.
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.
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.
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
//find the total distance before the last file shows at the bottom of the directory window
var scrollDist = (directoryHeight - 430) * scrollbar.value;
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.
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.
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.
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.
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.
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”).
