[SOLVED] UI layout element min & max size pulling my hairs

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 :

  1. all the messages have the same fixed width, and height will expand depending of the text lengh
    or :
  2. 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 :

Up

Unfortunately i think layoutgroups can only do so much. If you want auto new-line, you need a fixed width. having variable width prevents the previous behaviour from happening.

You probably will need to keep the existing variable-width behaviour, and calculate your message length to check if it exceeds your width, and add a new line(\n) to the message in the Text component.

Hmmm.
The thing is : i use a canvas scaler - scale with screen size - to adapt to multiple resolution. I would probably need to recalculate myself what is the “max width” according to the screen size. Then introduce a new line at the point where the char lengh exceed this limit. But i guess that the text size will also scale depending of screen resolution and though the correct char lengh limit might not be constant.

I guess i will have to test different fix to get it to work correctly. I wish this would have been possible using unity ui tools.

Scaling a canvas with screen size should be fine, you just need to use the size of the canvas. If you notice the greyed out recttransform properties in the inspector when using a canvas scaler, the size remains the same while the scale changes. The size of the canvas is a constant.

EDIT: or you could use RectTransform.rect.size and calculate via relative size, so lets say your message takes up 80% of the full app width, you divide the message length by the full app width to check if it is more than 0.8 and add the “\n” to the message.

Big thanks to @nickfagan who solved this !

1 Like