Unanswered

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

(1) Share

Report

Posted on by rssilvaba

160

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.

Categories:

Building Power Apps

All responses (2)

Answers (0)

Sort by

poweractivate 11,078 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

@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.
poweractivate 11,078 Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

@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.