UI with content size fitter always becomes the same size when I select "Preferred Size"

I have a UI image with a Content Size Fitter component, and a Vertical Layout Group component with a TM pro as a child. I'm making a coins/gem counter and it works fine, the background scales when the text gets longer. But for example when the number only consists of one digit the background is way to long and I want to make it shorter. When I select "Preferred size" it always changes back to a specific size no matter what I do. And why does it even choose that size?

 

Yeah, layout components can get confusing. I don't fully understand Preferred Size either.

I noticed one thing. For your Text object, the RectTransform says "some values driven by VerticalLayoutGroup", so I don't think the ContentSizeFitter is the problem. I'm not sure why it's picking that particular size, but maybe it will work if you untick "control child size" in the VerticalLayoutGroup? It's hard for me to tell just by looking, though.

 

Hi! In case anyone else comes across this and has this issue, I found a solution. I don't really understand the why of this solution though.

I was having this issue for two different buttons that I was trying to set so they scale to the text in them, but they seemed to have different widths that seemed to be the "minimum" size the Content Size Filter's preferred size setting allowed (one would shrink to, at minimum, 100px, while the other would shrink to a minimum of 124px). I realized the ratio of the image I was using for the buttons (of which I had sliced the sprite and tiled it) was different between the two, so I remade the image for the button with a smaller width, the sliced / tiled / used that sprite for the button.

From there, it didn't fix it completely, but I had the Pixels Per Unit Multiplier pretty high on the button's image, so I reduced that. Then, I increased the Pixels Per Unit a good bit on the actual image's import settings. After that, there's practically no fixed minimum width.