Gif for visualization:
How it works now: when my text gets longer, it overflows out of its bounds. This is the desired behavior. Why? Because no matter the length of the text, it always grows to the right horizontally.
What I want is to have the the horizontal length of the background image change dynamically based on the length of the text.
The hierarchy in the gif:
I have a parent button with a button script with three children.
-Background image
-Text
-Folder icon
The button script references the image for highlighting and clicking, the text displays on top of the image and the icon is displayed to the left of the folder name.
I tried a combination of HorizontalLayoutGroup and ContentSizeFitter whilst parenting the background to the text (or vice versa). In the end was able to get close to the desired behavior, as my text length increased, the image behind it did as well, but it wasn’t scaling accurately (each single character would expand the image far too much and it stretched the width in both directions horizontally, where as I am looking for it to stretch in one direction).
The ideal behavior being that I can increase the text length in one direction (only to the right) and the button image behind it scales according to the length of the text.
Essentially is there an implementable behavior in the UnityGUI feature set to have a button image overflow in one direction akin to the way text does?
Please see image for visual aid. It shows an example with the background completely enveloping text, and one where it is not and the desired behavior be required to remedy the problem.
Any help would be appreciated!