Unity UI layout groups

Hallo,

With Unity UI and as less scripting as possible i want to achieve a "chat dialogue" layout.

Currently I have a scene where text-messages spawn left and right and below each other, just like chat applications have (e.g. Whatsapp layout).
https://s15.postimg.cc/slcvuh3a3/chat_layout.png

So far so good.

The only thing that i cant create is the length of an individual text-bubble (blue or red panel).
It does fit to the size of the text (shorter text = shorter bubble, longer text = longer bubble), but it has to stop
halfway the screen.

Unfortunately i cant give a MAX width to the chatbubble, which results in a chatbubble that behaves like:

• It doesnt end where i want it to end (halfway parent panel) and it goes outside the screen (chatcontainer)
  
• I can give it a preferred size which is halfway the screen. But in that case the blue "background" of the chat-bubble already has the size. If the text is shorter than that size, there is to much space on the right side of the text (in other words, the bubble is to large).

How can I achieve this result? I am not afraid of programming, but if i can only use the layout-elements and UI elements of Unity itself, it is a bit easier.
https://s15.postimg.cc/smmtnluqj/goal.png



Currently is use the following settings and vertical, as said in the pictures, the textbox and background grow vertical when they need to. But horizontally, i have to give a preferred width, so when the text is really short like "OK", than the textbox is way to large.

My hierarchy is:
* Chatcontainer (is the parent of all and vertical layout group)
*** Contentpanel (contains everything)
*******npcMessageprefab (takes full width and is height of its child)
**********Outline (is the chat-bubble itself and contains the text component, has to expend width till 60% and increase in height is necessary )
*************Message (is the text itself and content size fitter)


Can someone help me please? I am struggling with this problem for a couple days now and i cant find a solution on the internet.

Below i have added screenshots of my setup and settings for the different objects for reference.

https://s15.postimg.cc/47elmgo2z/Contentpanel.png
Contentpanel = parent and vertical layout group to put the messages underneath its other.

https://s15.postimg.cc/np9929fu3/npc_Message_Prefab.png
npcMessagePrefab (and playerPrefab) contain the text and timestamp

https://s15.postimg.cc/a8cajpaqz/Outline.png

Outline contains the actually text-message component and is the chatbubble.

 

Hi @JeffreyA ,
with the next version of my Asset BetterUI this will be possible. Unfortunately it will take some time until I can release the next version because I am involved in another project which hinders me from doing anything else right now...

However, I achieved it by extending the ContentSizeFitter and add an option for maximum width / height to it.
I cannot post my code, because it is full of Better UI related stuff...
but basically you can override SetLayoutHorizontal() call the base implementation and after that call rectTransform.SetSizeWithCurrentAnchors() to apply the maximum width if necessary.