koobas.hobune.stream
unity3d new UI - spacing in Scrollable items does not scale proportionally.
Hello everyone,
As you see 3 different screenshots with different screen resolutions, and the spacing between items scales in a non-proportional way.
I have a Scroll Rect Component attached to the parent, and the components added to the child (content) appears in the attachment. I have read about Content size fitter, Horizontal Layout Group, Scroll Rect .. etc in the documentation, and played with its parameters like Horizontal fit (true/false), the Child Force Expand .. etc also followed some tutorials which contrust the scroll just like I've done.
But still can't get the "proportional spacing" between the items, lets say 1/6 th of the width of item width, but as you see I have even wider on small resolution screens and almost touching each other on big res screens.
It might be a simple trick or I have to change all structure.. any hints please :)
Best, Vasken
It's hard to tell what your structure is given what's posted, but it looks like the cards could be in containers themselves. If this is true then they could be expanded horizontally without their content being expanded, and would cause what we're seeing here.
Try deselecting Force Child Expand on the horizontal axis and removing the container (if any) of the card(s). If neither of those fix it then please add a screenshot of your hierarchy from the scrollview down to one of the cards.
Good luck!
@iwaldrop thanks for the hints.
I did have child UI items previously but the result was even more messy, so I made the items/cards in photoshop and they are all 1 image as you see in heirchy.
I just thought of removing Content Size Fitter, and at the end I will be given a fixed number of items, I'll scale the content manually for once, and rescale in case of adding another item later on.
Even if solves, its not the best practice.
Hello I just ran into this issue. I know this is old but Im posting for anyone looking for answers.
It seems that the Scroll Rect affects the scaling in this case. To solve this you must instantiate an empty game object and set it to the Scroll Rect. Once done, you can instantiate the actual prefab and set the parent to the empty game object from earlier. This will retain the anchor positioning but not the scaling. So I scaled it down a bit by half.. heres the code!
GameObject emptyObject = GameObject.Instantiate(blankImagePrefab, deckContainer.transform);
GameObject element = GameObject.Instantiate(elementPrefab, emptyObject.transform);
element.transform.localScale *= 0.5f;
