Scroll view with dynamic text and button

Unity Engine
, , , ,
1

Hi

I have a TextMeshPro object inside a Scroll View. The TextMeshPro text is assigned by a script and can change in length. To use a Scroll View with movement Clamped I have this setup.

In the Content child of the ScrollView I’m using a Vertical Layout Group with the Control Child Size options checked for both Height and Width, along with Force Child Expansion checked for Width, ensuring that the TextMeshPro object will resize according to the text assigned to it and it will always fit all the width of the Scroll view.

To compute the correct height of the TextMeshPro object I also added a Content Size Fitter with Vertical Fit set to Preferred Size. This way when the text length change the TextMeshPro is changed correctly.

This setups works until there is only the TextMeshPro object as I child of Content. I would like to add some buttons that are shown only when you reach the end of text. I can easily add the buttons as child of Content by the setting of the Vertical Layout group make impossible to me to set their size and they appears very distorted.

Any ideas on how to solve this problem?

2

Two tools that might help in such situations:

  • adding a rect trasnform as parent of button. That way parent rect might be stretched horizontally but you will be able to size button hover you want.
  • LayoutElement component. Should be possible to control preferred height of rect you use as parent of button.

A couple of different approches:

  • parenting button to bottom of text instead of vertical layout → this would become quite messy if you wanted more than one button. You would also need to manually add some paddings in couple of places to reserve space within scrollview for the button.

  • Similar to previous approach you could add “Layout Element” component and mark it as “ignore layout” But it would have mostly the same drawbacks as parenting button to text.

3

Sorry for the late reply! I was able to solve using a Layout Element for both the Text and the button