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

+2 votes
asked Jan 24, 2016 in Issue by Mike
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
commented Jan 25, 2016 by admin (31,720 points)
Hey Mike, any chance you're able to send me a package of what's in the scene? Don't need to include any of the other code you're using, but a package of your hierarchy and its components should help with working out what's wrong :)
commented Jan 25, 2016 by Mike
Hey,

Sure I'm able to send a package about this, where can I send the package too? Thanks for the help
commented Jan 25, 2016 by admin (31,720 points)
Oups, here it is: contact@materialunity.com
commented Jan 25, 2016 by Mike
Send a mail with the scene, thanks!
commented Jan 26, 2016 by admin (31,720 points)
Got it, we'll look into it as soon as we can ;)
commented Feb 1, 2016 by admin (31,720 points)
Hey there, taking a look at it now.

Just checking, what resolution/orientation do you have the player set to, when building the layout? Is it 360x640?
commented Feb 2, 2016 by Mike
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
commented Feb 5, 2016 by admin (31,720 points)
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 :)
commented Feb 5, 2016 by Mike
Hey, Thanks for your answer. I would appreciate it very much if you would send an example to me. :)

Thanks in advance
commented Feb 15, 2016 by Mike

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:


commented Feb 15, 2016 by admin (31,720 points)
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.

1 Answer

+2 votes
answered Feb 15, 2016 by devcake (500 points)
 
Best answer

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

Welcome to MaterialUI support! Ask us anything :)
...