Showing results for 
Search instead for 
Did you mean: 
Resolver II
Resolver II

Gallery that with variable template width does not work well with wrapping, looking for alternatives

Hi All,

I have this gallery that is shown vertically as in:
-Consider that the brackets are is the gallery and the "i"'s are the items
[ i , i , i , i , i , i , i , i , i]
This works well and all.

Problem is that I am handling the size of the items dynamically so it scales with different screen sizes.
Given that, If I try to display the gallery by wrapping the number of items that fits the width. See below an example:
-Let's say the current width of the screen can accommodate  3 items horizontally in the gallery then wrap will be 3:
[ i , i , i ,

i , i , i ,

i , i , i]

Happens exactly like that but then, I have huge gaps between the rows because I can't control (dynamically) the template height, only template width, do we have any alternatives for galleries? that I can achieve this pattern? 

Thank you all.




An easy way out of this one could be to check at what is the largest screen width you have to start showing it like this:


[ i , i , i ,

i , i , i ,

i , i , i]


First you just copy and paste the same gallery and size it / position it manually first to avoid the gaps you were talking about. Then if needed you could still make it adjusted to dynamically fit further based on the (largest width where only three per row can fit) until (smallest possible size). This will become the gallery copy where at that specific screen width or lower, it will only show then.


So now, what would be left is to make sure that if the current width is greater than  (largest width where only three per row can fit) then you must show the one gallery that is like this:


[ i , i , i , i , i , i , i , i , i]


and hide the one like this


[ i , i , i ,

i , i , i ,

i , i , i]


then vice versa when the current width is less than or equal to the  (largest width where only three per row can fit) 


You just do this with the Visible property of each Gallery and put an If condition there, just use the same If condition for both of the galleries and just swap the false with the true on one of them in a way that makes it so one is visible and the other hidden when screen is smaller in width, and the exactly vice versa when it is wider.







Here is a potentially even easier way out of this one:


1) Decide what is the largest screen width where you can only fit 3 columns in a row.
2) For the smaller screen width, use If condition and play with some of the other properties like the line height, etc. and see if doing this will help get rid of the gaps without needing the second gallery.

Helpful resources

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (5,257)