How to make text with a scroll bar?

Greetings,

I’m attempting to make a chat system and pretty much every way I’ve tried has failed.

Is there a good solution to making a chat log attached to a panel?

If at all possible, I want to attach a Text component to a panel and have a scrollbar scroll with the text inside the panel.

Can this be done?

The effect itself is quite simple.
You have the parent GO with a scrollrect and have the Child Content with a Vertical Layout attached.
You can then use a scrollbar with the scrollrect to scroll the content.
Additionally, you can add a mask to the parent so the user only sees a few lines instead of them all.

The issue with “Chat Boxes” is performance, as text rendering is not great. Although with TextMeshPro now being free, this might be a lot easier.

SO start with a Scroll View, add text as Children to the “Content” and remove unneeded scrollbars and you should be set.

P.S.
Must get round to adding a “Chatbox” control to the UI Extensions project :stuck_out_tongue:

1 Like

I’m thinking about using an InputField object for the portion where the player types a message, and a Text object for where to display the delivered messages.

On the InputField’s EndEdit call, you take its text value and append it to the Text object’s text value, then delete the InputField’s text value.

To get the scrolling to work, use the ScrollRect/Scrollbar technique from this tutorial.

I must admit, I haven’t tried this myself, but without knowing what you’ve tried so far, this is where I would start.

Are you still looking for a solution or did one of these previous posters get you headed in the right direction?

This is solved, thanks!

can you post how you solved it?
looking to do a similar thing (a text ui that is scrollable, google search sent me here and i confess its a little frustrating to simply see “This is solved” lol

Did you try some of the suggestions from this page? Can you describe your setup so far?

At the minute i shelved making it scroll-able to focus on the code that provides the text to the textUI.
I did spend a couple of hours trying to get my head around it, needing transform rects and assigning scroll bars and masks and completly messing up my project (it is in my opinion needlessly complicated for something that is a basic requirement of displaying a large panel of text).
I will attempt again later, i am not sat here waiting for the solution to just drop.

The setup at the minute is
a quad with a paper texture
a canvas with a resolution of 1080x1920 (the resolution of the phone target…but something i do need to adjust to make more square)
with a textui text trancated if it drops off it (that needs to be changed ofcourse) and auto sized text for readability on both small and large text inputs.
a script sends the text to the textui

coming from android where to do this i just put a webview into a scrollable box and viola lol.

So much is better in unity (the fact that i can build for pc and android from the same project for example) and not at the mercy of supporting 3 different sdk ways of doing the same thing that work only in 1 phone version each lol, BUT some things seem needlessly complicated, the ability to scroll text in a box is pretty standard in most games.

EDIT
after a few more hours of hitting my head on a wall i found this video
https://www.youtube.com/watch?v=MWOvwegLDl0

not only did it help me sort out the scrolling but it has given me a much better understanding of anchour points and ui scaling. so YAY!

3 Likes

Very cool… I haven’t seen that video, but glad it helped you :slight_smile:

Created - deleted - recreated a few panels to make sure i understand the concepts right in my head but yeah the video helped a hell of a lot.
Originally commented here as its a pet peev of mine when you search for help with something, see someone with the exact same issue and then it just ends with “solved it” and no description/link of how lol

I know… it’s nice when people post a solution :slight_smile: At least this thread contains that video link now, which could help someone else if they find their way here.

2 Likes

This is also a simple explanation of how to create a scrollable text panel …

6 Likes

The above method is useful for Text, but what to do with InputField, can you give me a solution, thanks?

same i also want to download unknown text size from url and want to make it scrollable

1 Like