Dynamically fitting UI components inside a UI panel - help pls

Unity Engine
1

Hi everyone, I am working on a project that requires a UI panel to appear with its children being “visiblebounds” (2d mask attached), “bounds” (scrollable area which contains any of the following components: image, text, video), “scrollbar” which scrolls and an exit button to close the UI panel.

The components are retrieved and added to the UI panel based on which object i’ve clicked
( for example “tag1” has 1 text component and 1 image component and 0 video components, “tag2” has has 2 text components and 0 image components and 0 video components)

after the text component has been instantiated i’ve added text content by loading a .txt file in resources.
the same goes with image and video components but with their respective content.

the issue i’m having is finding a robust way to (by code) have the components fill themselves with content and THEN setting the total height (width is a constant set to the width of “visiblebounds”) of the total number of components as the “bounds” height.

this is so all of the components are nested inside the bounds area and is scrollable with only the content which is currently inside the “visiblebounds” to be visible.

currently the process goes like this:
if the object i select requires 2 text components and none others, the two text prefabs instantiate, both get their respective text from .txt files (both with differing content) and display inside the “bounds” as intended, HOWEVER i have absolutely no idea to get the ACTUAL height of the text so I can use it to calculate the height of “bounds”… i’ve tried .preferredHeight, it kind of works but not really, it gives me a height that is slightly more than the actual height of all the text that fits within the width. not sure why.

i’ve spent far too long scouring through documentation and other forums posts about similar issues, getting preferredheight of textmeshprougui etc etc… and to be honest every time I think about this now my brain slowly starts dismantling. it’s quite discouraging, anyway i digress. thank you for taking the time to read i hope you can help :slight_smile:

2

Rather than writing custom code for this, you probably just want to attach a Vertical Layout Group and a Content Size Fitter to your “visiblebounds” object. That will automatically stack the children vertically and change the total size to match the preferred sizes of the children.

Regarding the preferred height of text:

First, note that if your scrollbar automatically appears/disappears following the usual conventions, then the available width may change slightly depending on the height of the content, which can change the text wrapping and therefore alter the preferred height. If you calculated the text’s preferred size assuming the scrollbar would be visible but then the scrollbar disappeared because no scrolling was needed, that could account for a discrepancy.

Still, a small discrepancy between the “preferred” size of your text and the actual space occupied by the text is not super surprising, because different letters extend different distances above/below the baseline, and different fonts can have all sorts of weird stuff. It might be that you’re using a font that specifically doesn’t extend all the way to the theoretical “top” of the line or something like that.

Also check any settings on your text component regarding line spacing, etc.

If you just want to fiddle with how it looks, you might try using a different font, or maybe setting the “spacing” on your layout group to a small negative value (so that consecutive objects slightly overlap) and see if that looks any better.

1 Like
3

Thank you, I can’t remember what exactly I did but i’ve got what I need working :slight_smile: