Search Unity

Grid won't resize the parent control

Discussion in 'UGUI & TextMesh Pro' started by Lidanh, Aug 24, 2014.

  1. Lidanh

    Lidanh

    Joined:
    Mar 27, 2013
    Posts:
    29
    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
     
    shaneparsons likes this.
  2. Metricton

    Metricton

    Joined:
    Jan 3, 2013
    Posts:
    13
    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
     
  3. Lidanh

    Lidanh

    Joined:
    Mar 27, 2013
    Posts:
    29
    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!
     
    Last edited: Aug 25, 2014
  4. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    To make a grid resize with the content, add a ContentSizeFitter component to it and set it to resize to preferred size vertically.
     
  5. Lidanh

    Lidanh

    Joined:
    Mar 27, 2013
    Posts:
    29
    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
     

    Attached Files:

    rakkarage likes this.
  6. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    Yeah, I added a ContentSizeFitter to the container in the sample and it breaks it; doesn't work.
     
    awsapps likes this.
  7. ippdev

    ippdev

    Joined:
    Feb 7, 2010
    Posts:
    3,855
    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;
     
  8. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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.
     
    DantaliaN and Lidanh like this.
  9. Lidanh

    Lidanh

    Joined:
    Mar 27, 2013
    Posts:
    29
    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
     
    Last edited: Aug 26, 2014
  10. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    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?
     
  11. Lidanh

    Lidanh

    Joined:
    Mar 27, 2013
    Posts:
    29
    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.
     

    Attached Files:

  12. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    Lidanh, you are amazing. Thank you!
     
    Lidanh likes this.
  13. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    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.
     
    Rambit likes this.
  14. LoTekK

    LoTekK

    Joined:
    Jul 19, 2010
    Posts:
    136
    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?
     
  15. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    LoTekK, I am experiencing the same problem with horizontal layout not working.
     
  16. ippdev

    ippdev

    Joined:
    Feb 7, 2010
    Posts:
    3,855

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

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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.
     
  18. Supergeek

    Supergeek

    Joined:
    Aug 13, 2010
    Posts:
    103
    Thanks!

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

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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.
     
  20. Ricks

    Ricks

    Joined:
    Jun 17, 2010
    Posts:
    650
    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").
     
  21. EvalDaemon

    EvalDaemon

    Joined:
    Aug 8, 2013
    Posts:
    107
    This still doesn't work for horizontal. I would say it is a bug as it clearly works fine for vertical.
     
  22. infinitypbr

    infinitypbr

    Joined:
    Nov 28, 2012
    Posts:
    3,149

    This worked for vertical.
     
  23. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
  24. MathBlade

    MathBlade

    Joined:
    Aug 18, 2015
    Posts:
    13
    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.
     
  25. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    Put a LayoutElement in the toggle and set the min width/height.
     
  26. MathBlade

    MathBlade

    Joined:
    Aug 18, 2015
    Posts:
    13
    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!
     
  27. runevision

    runevision

    Joined:
    Nov 28, 2007
    Posts:
    1,892
    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
     
  28. MathBlade

    MathBlade

    Joined:
    Aug 18, 2015
    Posts:
    13
    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.
     
  29. zxcvb7653

    zxcvb7653

    Joined:
    Nov 11, 2017
    Posts:
    24
    I am like 8 years late to the party, but I was struggling with this problem. upload_2018-9-1_15-11-57.png

    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
     

    Attached Files:

  30. LucassKim

    LucassKim

    Joined:
    Mar 7, 2018
    Posts:
    1
  31. karsnen

    karsnen

    Joined:
    Feb 9, 2014
    Posts:
    65
    Cenkakdag, Chastom, LorDor77 and 2 others like this.
  32. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    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. :D 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
     

    Attached Files:

  33. fraeri

    fraeri

    Joined:
    Nov 8, 2018
    Posts:
    64
    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);
    }
     
  34. BiomotionLab

    BiomotionLab

    Joined:
    Oct 9, 2018
    Posts:
    11
  35. Haiyoooo

    Haiyoooo

    Joined:
    Jul 16, 2018
    Posts:
    1
    Hello~ I got this working for Horizontal :)

    Needed no code
    Unity v.2019.2.8f1
    upload_2020-5-24_8-7-55.png

    Scroll rect is on another object
    upload_2020-5-24_8-8-17.png

    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.
    upload_2020-5-24_8-9-37.png
     
    TonCoder and xpoDeveloper like this.
  36. hendryshaikh2004

    hendryshaikh2004

    Joined:
    Apr 24, 2018
    Posts:
    8
    Thanks Mate It Worked!!