Hi
I’m trying to make a messaging app.
I’m currently building the conversation screen behaviour.
I have reach the point where i can add new message on a scroll rect viewport with a vertical layout group on the content holder.
Spawning new message on this list is working fine, but now i want the messages to expand their content size based on the text inside.
I got it to work like this :
- all the messages have the same fixed width, and height will expand depending of the text lengh
or :
- the width of the message is growing with the text lengh, but this width won’t be limited to a max width
As an illustration :
solution 1 )
Solution 2 )
I would like to have a mix of this 2 behaviour: the size of the message should fit the text lengh until it reach a max size, and then just expand in height.
I tried several stuff, and i’m now getting confuse in the correct way to do it. How can i achieve it ?
here are other inspector hierarchy info :
1 Like
Hey there! I figured it out, here’s how you can do it:
- On the “Content” object, on Vertical Layout Group, select Control Child Size: Width and Height, leave everything else un-selected. On the Content Size Fitter, set horizontal to un-constrained and vertical to preferred size:
- On each list item (MsgPrefab in your case) add a Vertical Layout Group and set it to the same as the Content object (Control Child Size: Width and Height):
- Remove any layout components from the Text object:
That should do it 
6 Likes
oh thx ! I will test this tonight
That works perfectly ! Thanks a lot
I lack knowledge about unity ui components and was pulling my hairs on this. I should find a good unity ui courses to master this kind of stuff
I don’t want to abuse, but do you have an idea for an elegant solution to display the msg on the left - or right - side of the screen ( to make clear differences between the user own messages and those he received).
right now i’m trying this setup :
I set the padding value manually in this screenshot, but i would end up making a script to set a value in padding left / padding right of the content gameobject depending of the message width but it seems like an over complex solution.
Moreover, i’m nesting vertical layout group inside vertical layout group and this layoutception seems like a suspect solution.
Years later, and this single post has solved a problem that has taken me days to find the answer for! A thanks to you!
