Combining MaterialUI with a Grid layout group creates extra spacing on android

Question

I recently started using this package which seemed amazing after it's introduction, however i quickly ran into a problem.

So I'am using a materialUI panel with 2 empty gameobjects attached to it's panel layer, the first being the scroll rect and the second empty gameobject has a grid layout and content size fitter attached to it. This second gameobject has an X amount of children (dependent on the amount of items in the rss feed).

When i try this setup out within the editor this is shown perfectly even when I change the resolution while in play mode. So far so good but when I build the same setup to a mobile Android device there suddenly is a lot of extra spacing between each RSS item. And a black rectangle had appeared on the right side of the screen. I'm nog sure if all of this is related to this UI system but it partially seems to be involved

Thanks for any help in advance

Comments

Hello, I've tried to build it on different settings, the resolution you provided is one of them and als I've tried building it in full HD resolution, both with the extra spacing between them. The orientation is set to portrait view in the Android settings

---

Okay, thanks. It seems from the scene you sent me that you intend to have a vertically scrolling list, rather than a scrollable grid. If this is the case, may I suggest using a VerticalLayoutGroup instead? GridLayoutGroup isn't quite as good at handling different resolutions and aspect ratios. If you'd like, I can send you an example :)

---

Hey, Thanks for your answer. I would appreciate it very much if you would send an example to me. :)

Thanks in advance

---

Hello, 

I was wondering if you already had some time to take a look at this. At this point I was trying to create a vertical layout group myself but I still ran into the same problem as I encountered with the grid layout as well. 

This time I've created some screenshots to illustrate the problem I'm having

First, the result that I expect:

Secondly, the result I'm getting on my mobile device:

---

Hey Mike,

Apologies for the delay - I've somehow missed your earlier comment.

Are you instantiating those list items at runtime? If so, are you able to check that their scale is always 1,1,1 (try testing at different resolutions/scale factors)? I've found that they don't always instantiate at that scale if you're using canvas scaling :)

~ Declan.

Answer 1

After changing the grid layout for a vertical layout which is better for the purpose I had anyway, I was still having the same problem. The issue was that instantiating at runtime sometimes changes the scale. Simply adding the line:

    temp.transform.localscale = new vector3 (1, 1, 1) 

solved the problem for me. Thanks to Declan for pointing this out to me. 

Mike