ScrollView with Horizontal Layout Group

I would like to add objects to the scroll content view at runtime and use the grid to space the objects out. I am unable to creating a working prototype using uGUI. Use of any layout control seems to break the Scroll View and its content.

Steps to replicate

  • Open the demo project and open the ScrollView scene
  • Expand the Canvas/Window/Content/ScrollView/Content
  • Attach a HorizontalLayoutGrid to the child most content element
  • Set a logical spacing, I chose 200
  • At design time, the grid works correctly, the objects are spaced
  • Play
  • At runtime the child objects all rest to the corner with a position of 0,0

More Notes

  • If I disable the Horizontal Layout Grid, the children do not reset their position on play.
  • If I remove / add objects to the container the size of the container does not change
  • The size of the container should reflect its children
  • If I disable then reenable the Layout Grid, it works.

Hi, this should work properly. Could you raise a bug so we could see exactly what you are doing in code?

I have submitted the project using the Bug Reporter.

The Bug Reporter did not give me a Ticket #.
I put this down as “problem with player”
I referenced this topic in the help request.

(Case 627639) uGUI BETA

See if this helps, just created a simple project with a ScrollRect, Mask, ContentSizeFitter and HorizontalLayout Group.
Also added a button that will programatically add new children to the LayoutGroup which resizes appropriately.

Hoe this helps, if I missed anything from what you were asking, please let me know.

1743133–110153–ScrollRectCode.zip (41.9 KB)

1 Like

This does help. I did not even know about the fitter or the layout element scripts. That said, I still have some problems.

  • Items are placed outside of the scroll area. If you disable the mask it is quite obvious the first item is added 1/2 way outside the scroll;
  • The scroll position moves. I tried caching the scroll value and reapplying it after I add the prefab. That did not work, so I put it in a coroutine with a yield statement, that did not work. Then I tried waiting 10 frames… it works but is ugly.