[Solved] need help regarding autolayout in scrollrect

Hi All,

I want to implement the scrollrect which will have 3 different height section. (please refer the attached image).

For ex.
Section 1, height = 80pixel
Section 2, height = dynamic (as per content)
section 3, height = dynamic

all section’s width should be equal to parent’s panel width
Also sections need to be align vertically

I have tried using content size filter, aspect ratio filter, vertical layout group, grid layout group
But unable to get the correct result.

Can someone pls suggest me the correct way to achieve this?

Thanks in advanced

The new UI is very picky, haha. And you can do things in a million different ways. What I would suggest, is have a hierarchy like this.

ScrollRect (Technically the main panel)

HolderPanel (This will have your content size fitter & a vertical layout group)

TitleText (Both the text component and a Layout Element component)

SectionTwoGrid (Content Size fitter & Grid Layout group)

GridElement (Layout Element component)

SectionThreeVertical (Content Size fitter & Vertical Layout group)

VerticalElement (Layout Element component)

This should give you a generic layout that you can work off of, but anchors, positioning, and scaling is all up to you my friend. Whatever looks good. A word of advice, for your layout group elements, if something does not seem to center correctly, try editing the pivot vectors in the inspector (rect transform).

Any other questions or if this does not work, I will be around to refine this answer for you.

~ Matt