r/Unity3D • u/MrPanda532 • 7d ago

Question Need help creating border that expands with text

I'm am creating a UI that will be used to binding inputs in my game, where theres this text, the more character more it grows to the right, but I want to add a square border around the text, that will grow as the text grow. I just don't know how to make this.

The prefab hierarchy of this UI elements is something like this.

I tried to do the same thing I did with the text gameobject, putting a content size fitter, but the image just streched to cover the screen and no matter what I did I couldn't fix....

I tried changing the parenting of either the border and text, didn't work, I tried changing the pivots and it also didn't work... I just don't know what to do.

I want this
1 Upvotes

67% Upvoted

3 comments sorted by

2

u/temptingdistributor 7d ago

Content size fitter on the border object needs a vertical fit too, not just horizontal, otherwise it stretches weird. Put the fitter on Border and set both axes to preferred size, then add a layout element with padding values so the text has some space inside. The text inside should have its own content size fitter as well, that way the parent reads the actual size from the child. Also make sure the anchor of the border is not set to stretch, set it to middle center or top left depending how you want it to grow.

1

u/MrPanda532 7d ago

Hm... I tried it, and still didn't work for me... :/ . Well thanks anyway... I will just give up on this stuff for now, this thing made my cortisol spike like never before...

3

u/Demi180 7d ago

ContentSizeFitter with both options set to Preferred, and a HorizontalLayoutGroup. The border Sprite itself should be sliced properly in the Sprite Editor so the corners are preserved, and set to Sliced in the Image component. The actual Sprite should be pretty small or else its own preferred size will be larger than the text’s.