koobas.hobune.stream
Dynamic window size - Scroll View, Content Size Fitter and Screen Edges
Hi there!
I'm wondering if it's possible to use a Scroll View and Content Size Fitter, to have an expanding panel based on its content, but when the panel reaches the edges of the screen, the scroll bars kick in?
It's to handle showing content at different screen resolutions. I don't want to stretch the panel the screen's height the whole time, as it will look empty. I'd rather have it as small as possible, but if that is larger than the screen, simply add a scroll bar.
Any help is greatly appreciated!
I solved this using the post by @Brathnann here. Basically:
The ScrollView 'Viewport' should be set to the max size you want it to be.
The 'Content' is where the content goes. 'Content' should have a ContentSizeFitter and some type of LayoutGroup, e.g. VerticalLayoutGroup. This will allow the content box to expand, but the Viewport will act as a mask.
Scrollbars will hide automatically depending on the setting on the ScrollView.
I was just looking for the answer to this question too. This does not answer it - it's a fine description of how to make a normal scroll window with a fixed size.
The question is asking how to make the viewport match the size of the content until a certain maximum size, at which point it is capped and becomes a scroll window. I have not found a solution to this problem yet, so my guess is that it might only be possible with scripting
It's been awhile since I did this, but I'm fairly certain the answer I posted does solve what you're after. The 'Content' will continue to expand, up until it reaches the 'Viewport' size, where it will become a scroll window.
You obviously have to have the extra additional internal element that does the expanding, but unless you can't have that, this does solve the issue, doesn't it?
Thanks for the response. $$anonymous$$aybe I'm not understanding, but I don't think it is a solution. What I want - and what I believe the OP is asking - is for the Viewport itself (in addition to the Content) to shrink to match the content size if the content is small enough - but never to expand past a given size (in OP's case, the maximum size being the screen size).
This is a lackluster solution to the problem. Yes, I get a scroll view, but it will always be the same size. Even if there is a lot of screen space left for it to cover. The solution @Daerst provided does what I want. The scroll view expands as long as there is space left. Once there is no space left, it starts to scroll.
Here's a solution relying solely on Layouts and LayoutElements, no ContentSizeFitters.
By default, you have a hierarchy like this: Scroll View -> Viewport -> Content -> Elements Let's start from the bottom. Content gets a VerticalLayoutGroup, not controlling the height. You can now add elements to it as you like, their height will be unchanged.
In order to resize the Content to its children, we add a VerticalLayoutGroup to its parent (the Viewport object), and set it Control Child Height. This will make sure the Content object fits its children.
Now, we're in a pickle regarding the Viewport object. We want it to grow with its children, but not exceed the screen. The Content, based on its children, reports a MinHeight, and this is the first thing the layout system will try to realize. In this special case however, it's perfectly fine for the child (Content) to exceed the parent (Viewport), so add a LayoutElement to Viewport and overwrite the MinHeight with 0 (or any other minmum value you'd like to use).
In order to not break the scroll bars with this next step, add LayoutElements to both and set them to ignore layout. Now, to atually resize the Viewport object based on its Content child, add another VerticalLayoutGroup to the Scroll View and set it to Control Child Height.
Now add a screen- / window-sized RectTransform, give it a VerticalLayoutGroup that Controls Child Height, and throw in your ScrollView, and you should be fine.
For reference, here is the configuration in my test scene: https://imgur.com/J43x2f$$anonymous$$
Thanks! This works almost exactly the way I needed. The only thing I couldn't figure out, was how to have elements in the content use layouts... I.e. paragraphs of text with dynamic content.
If I do that, then the size of the window end up using old height values, always lagging one layout recalculation behind the content.
I ended up writing an ugly script to set the rectTransform height of each text element to the Text$$anonymous$$eshProUgui.preferredHeight.
I made an account just to say THANK YOU. If you ever find yourself in Oakland, CA, please hit me up because I owe you a beer.
This is possible by working out how big the content will be and altering the scroll view and the scroll view content RectTransform. The scroll view allows for the ability to turn the scroll bar on or off is the content RectTransform is smaller than the scroll view window.
Thanks for the reply! I used the reply from here, which I think is what you were alluding to?
Maybe late... But I handlet it with a content size fitter on the viewport. Just check the viewport rect with the maxvalues u want and Disable its fitter if it reaches max.
Thanks for @Daerst for his insights above (his is truly the best answer). I want the panel to also be centered in the middle of the screen and expand vertically so I took what he wrote and figured out how to do it and have detailed it in my document titled Up-Down Expanding Panel with Center Expanding ScrollView
