cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Resolver I
Resolver I

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.

2 REPLIES 2
Super User II
Super User II

@rssilvaba 

 

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.

 

 

 

 

Super User II
Super User II

@rssilvaba 

 

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

Announcements
News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

Power Apps Community Call

Power Apps Community Call- January

Check out the Power Apps Community Call for January 2021

PP Bootcamp Carousel

Global Power Platform Bootcamp

Dive into the Power Platform stack with hands-on sessions and labs, virtually delivered to you by experts and community leaders.

secondImage

Power Platform Community Conference On Demand

Watch Nick Doelman's session from the 2020 Power Platform Community Conference on demand!

Top Solution Authors
Top Kudoed Authors
Users online (8,685)