# Changing alignment within a vertical layout group

I have a vertical layout group that has text bubbles instantiated into it. Instantiating them always aligns them to "lower middle". However, I'd like to have them on opposite sides for a message app effect.

Right now, I'm changing the anchoredPositions of each instantiated UI object in Update. Is there any better way of doing this?

Create a wrapper RectTransform around each bubble which takes up the full width, with a HorizontalLayoutGroup component. Set the Child Alignment on the left-side messages to Middle Left, and on the right-side messages to Middle Right. So your hierarchy looks like this

|-ChatMessages (VerticalLayoutGroup, Child Alignment = Lower Center)
|----LeftMessage (HorizontalLayoutGroup, Child Aligment = Middle Left)
|--------Message (Text, Image, Whatever)
|----RightMessage (HorizontalLayoutGroup, Child Aligment = Middle Right)
|--------Message (Text, Image, Whatever)
|----LeftMessage (HorizontalLayoutGroup, Child Aligment = Middle Left)
|--------Message (Text, Image, Whatever)
|----RightMessage (HorizontalLayoutGroup, Child Alignment = Middle Right)
|--------Message (Text, Image, Whatever)

• I tried this and it didn't work out well. Made my own system instead. – itsPav Sep 18 '17 at 21:24
• Odd. It worked exactly as I expected when I tried it. – Ed Marty Sep 19 '17 at 16:25
• The thing is if I set the text bubbles to be 100% of the width of the Vertical Layout Group it doesn't look clean. I'm using a content size fitter on the left/right message, and a horizontal layout group. When I use both of these (vertical and horizontal), it doesn't work out well. Could you upload a gif of your setup? – itsPav Sep 19 '17 at 21:47
• I followed this; hilllo.com/limit-max-width-of-a-layout-component-in-unity Very similar to your solution. It works. – itsPav Sep 20 '17 at 13:21