UI scaling based on content

I’m trying to create a popup/tooltip that dynamically scales vertically based on the height of all the content inside. Basic functionality I’m looking for is that when the player taps on a character, a little popup appears that displays info about the character, including a list of all the selected character’s abilities; the number of abilities per character may vary.

I’ve created a prefab for the ability entries that consists of an ability icon, name, and description, along with a background panel behind the entry. I want the height of each ability entry–along with its background panel–to scale based on the # of lines in the ability description. Similarly, the popup should scale based on A) the number of ability entries, and B) the height of each ability entry (longer descriptions = taller entries).

Now, I can kind of get this all working with a combination of Vertical Layout Groups and Content Size Fitters. However, I’m running into problems with the background images on both the ability entries and the popup itself; whenever I add a child object with an Image component or attach an Image component to the parent object, it completely throws the scaling off. It looks like Unity is trying to “stack” the BG images on top of the other child objects, rather than stretch the images to match the size of the parent object. Basically, it doesn’t look like I can scale the parent based off the height of its children and have one of the children (i.e., the BG image) scale based on the size of the parent.

Anyone know a way around this? I’m not aware of any other way to scale parent object based on content other than Vertical/Horizontal Layout Groups, but using those seems to preclude using any kind of BG image.

You can add a LayoutElement component to your Image and set is to ignoreLayout. Then anchor your Image to stretch on both axes and set all values to 0 so it will fill the parent completely.

Also giving your parent an Image component should work, I’m not sure why it doesn’t for you