I've got a ScrollView inside my Canvas which will be populated with a UI GameObject (Panel) at runtime. Because this dynamic child does not have a fixed size, I want to resize my ScrollView to the same width as the child. In other words: The ScrollView should be the width of it's child.
I think this is possible without the need of coding but I cannot get it to work properly.
I already tried to add a Content Size Fitter to the Content, Viewport and ScrollView, but this only results in a width of 0.
My structure is the following
Please tell me if you need some more information
Edit 1:
it seems like the problem is with the GameObject Content. It does not resize with it's child element
The only object that shouhld have ContentSizeFitter is the Content of the scrollview (only in the axis you want the content to expand). To work properly its best to also have a Vertical or Horizontal layout group, with checkboxes 'child control size' checked, and 'expand' un-checked.
No all thats left to do is make sure all the children of the content object have LayoutElement with preferred layout sizes.
It can be a little bit tricky to get it right first few times but definitely possible. The order in which you add components is somewhat important : make sure you have layoutElements set up in the children first, then add the layout group, and only after it works correctly add the content size fitter. If you do it the other way around it tends to escape, as in you mnight get objects resized to 0 before you notice
Related
I am a beginner in Unity and I am currently making a simple game. I recently solved my problem of scrolling two objects at the same time, but the vertical layout will put the other at the bottom. The answer came from the question I posted a while ago which is to use LayoutElement component. It does work in general, but when I start or play in the Unity it does not work at the start, I need to disable it and enable at runtime for it to work.
Just to add, I noticed that the ObjectiveItem object is 0 everytime I start or play the project. And the height will set to its children's height when I disable and enable the LayoutElement component.
I think the Content Size Fitter sets the height to 0. because when I mess with any height related settings in like when I uncheck the height value in Child Force Expand it will set the height to the height of its children same goes to the Child Force Expand of the Lines and Items objects. And like I mentioned in the start, when I disable and enable the LayoutElement in the ObjectiveItem object it will set the height of the children or even when setting the object itself inactive and active. The main problem is that the height is set to 0 at the start of the game.
This is the object (ObjectiveItem) that is set to the Content of the ScrollRect. The object already has Vertical Layout Group and Content Size Fitter to get the height of its children.
If you use this combination of a LayoutGroup + ContentSizeFitter you should also enable the XYLayoutGroup.ControlChildSize and not use Force Expand and then your child objects should either have a ContentSizeFitter (if it is further LayoutGroups) themselves or have a LayoutElement with according settings.
I know this feels extremely clunky but this is the way I was told and worked so far.
If you want scroll to work on new items you need to have a VerticalLayoutGroup that also has a ContentSizeFitter component with preferred height chosen, that way new items will increase the height of the vertical layout and if added correctly to the scroll component it will scroll with any height.
I have a ScrollViewer which has a TopHeader, TopLeftHeader and LeftHeader specified.
This setup works like a charm and I have no issues here.
Problem:
I need a footer for the ScrollViewer which behaves exactly like the TopHeader but placement is at the bottom.
The only thing I could think of was to add more stuff to the header and then move it to the bottom of the page.
How much ever I raise the zindex of the grid which I want to place at the bottom, it still seems to be bound to the TopHeader and movement seems to be happening only in the TopHeader area.
Question:
Is it possible to move the content out of the TopHeader area and move it to the bottom of the ScrollViewer?
If so, how do I achieve this?
Also, what is the maximum value of the zindex I can pass, since I got an OutOfBounds exception.
Thanks
EDIT:
Apparently 1000000 is the upper limit to zindex.
I am new to the unity's latest UI. What I know about UI Text Element is, we can wrap the text with in the horizontal bounds, but if it comes to next line, either it overflows or it truncates. If it fits in the height, font size decreases. What I want is to adjust the height of the text area according to the content it contains, without affecting the font size inside.
I will be having many text elements as childs to a parent panel, the panel itself will be child to a scrollable container. So I have to calculate height of all the children to adjust the height of the parent panel.
How do I achieve it?
Add a Content Size Fitter component to Text and set its Vertical Fit to PreferredSize.
I wrote a blog so people might find it helpful knowing how I used this component to create dynamic lists.
http://mobile.folio3.com/creating-dynamic-scrollable-lists-with-new-unity-canvas-ui/
You can use "Best fit" option under text script in UI Text Element.
And set Min size and Max size value according to your need.
What I need to do is to stretch the control to fill entire Canvas.
I think I have to use a Canvas (I don't want my control to be clipped
when rendered outside the container - as far as I know all the other containers
perform clipping - Grid, Border... - maybe there is another solution?)
If I put the control inside Canvas it works fine (I mean it is not clipped).
However, it doesn't fill entire Canvas.
I was trying to bind to the Canvas width and height - with no results.
Do you have any ideas or clues?
Thanks in advance!
A control can escape the container such as a Border or a Grid by having negative margins. So perhaps you should return to using a Grid and play around with placement using column and row definitions and using negative margins where you need them.
I have this:
Each list is its own WrapPanel and they are all on another WrapPanel which is in a ScrollViewer. If I don't set the height myself for the main WrapPanel it assumes I want the WrapPanel as high as it can go giving me only one column whereas I want as many columns as needed to fill the window.
If I set the Width and Height of the WrapPanel that holds everything to fixed numbers, but I want it to change when the user resizes the window.
In your example screen shot and description I see a tab control whose anchor is set to Top, Left, Bottom, and Right. The tab page with AutoScroll set to true. Within the tab page I see a FlowLayoutPanel. The FlowLayoutPanel has its AutoSize property set to true. I also see a set of other panels/user controls each of which contains a title and a series of check boxes.
You can`t achieve this with standard controls. You can try to create your own custom WrapPanel implementation. But, actually, looking at original WrapPanel sources I think this will be quite tricky. You see, what you want, is basically to measure how many columns can fit in the current window, while every element in column can be of any size. The way I see that algorithm, it will require N*N iterations to get the final result. So you may have problems with performance.