If you use a lot of galleries in your Power Apps, you may have noticed that it can get tedious sometimes, lining things up and arranging controls, especially when you want your gallery to look more like a table. Yes, there is a data table control, but it doesn’t have as much functionality and flexibility as a gallery. In this post, I’ll show you how you can make your gallery responsive. This means that as the screen size changes, the columns expand and contract, and stay even. When using a container to achieve this, you’ll save time that you would have spent in arranging and adjusting all of those labels.
Here is what an app looks like when resized, by default, with Scale to fit turned ON. Notice that the app stays in the same rectangular shape, no matter how you re-size the browser or screen, and it stays at the same dimensions.
On the settings screen, in the display section, you can turn Scale to fit OFF.
When that setting is turned OFF, the app’s controls will then have the ability to be responsive as you change the size of the screen by either adjusting the size of the browser window, or opening the app on different devices such as mobile phones or tablets. When the app is responsive, I like my gallery columns to be able to have a variable width as the app size changes, but unfortunately by default they will be cut off, like this:
In this post, I’m going to show you a solution to that problem, and a solution to the tedious nature of creating and lining up many labels to create the look of columns in a gallery. This is a way to make your whole gallery responsive using containers. I’ll be inserting a container inside of the gallery for the labels AND on top for the “column headers”.
1. With your cursor inside of your gallery, click on the Insert button on the far left, and choose Horizontal container.
2. Give the container a useful name. I’ll rename mine ctnProjectRow. Your container will just be in a random spot in your gallery for now, that’s fine.
3. If you are starting from scratch from a brand new gallery with this container in it, just select the new container, and choose Label from the insert tab, to put each new label inside of the container. If you are starting from an existing gallery with labels in it, you can cut each label from that gallery row, and paste each one inside of the container, like this. I’ve cut and pasted two of my seven so far:
(Note that you may see an error when you cut and paste labels. into the container. The error will be coming from the OnSelect property. If your OnSelect says “Select(Parent)”, you can just change it to false. We’ll address this later)
4. For this container’s properties, the first thing is to set its X=0, Y=0, and Width= Parent.Width As you can see in this screenshot, I used Parent.Width – 5 this is because my gallery has some padding, and I didn’t want it hanging off the edge. Also, I have an icon in my gallery on the far right. I brought it forward, so that it is in front of the new container.
5. Now that the first container is situated in the gallery, here are the next settings to set up:
container settings:
Direction: horizontal
Justify: space between
Align: start
Gap: 0
Overflow (both): hide
Wrap: off
6. Next, select the labels in the container, and set them up as follows:
height: 40
align in container: set by container: start
flexible width: on
minimum width: 30
vertical align: middle
overflow: hidden
auto height: off
7. If you have a column that needs to be wider than other columns, you can change the Fill portions property. For example, my “Description” column needs to be wider. Since I have 7 columns, the fill portion value for description by default is 1 of 7. I edit it and change it to a 2, which automatically then shows as 2 of 8. You can do this for multiple columns, in order to adjust their width in relation to the whole gallery’s width.
8. Now it’s time to do this same thing with the labels that go at the top of your gallery. Create a new horizontal container, insert it towards the top of your screen. I’m naming mine ctnColumnHeaders.
9. Repeat step 3. This time of course you’re not inside of the gallery, but you’re inserting or copying/pasting all of the labels to represent each column.
10. Drag the container to a spot right above your gallery. Set the following properties in this second container:
X: 0
Width: Parent.Width
Direction: horizontal
Justify: space between
Align: start
Gap: 0
Overflow (both): hide
Wrap: off
11. Select all of the labels in this second container, and set them up as follows:
height: 40
align in container: set by container: start
flexible width: on
minimum width: 30
vertical align: middle
overflow: hidden
auto height: off
Set up the fill portions for these column headers in the same way that you set them up inside of the gallery in the first container, so that everything lines up. For example, I set this description column to take up 2 fill portions in the container in the gallery, so I did the same thing for that column header label in the container on top of the gallery.
12. If you need to have buttons in your gallery row, as you can see I have a couple of them in the screenshot above, just be sure and move them to be layered above the container in the gallery, like this. Notice that the icons are on top of the ctnProjectRow container:
13. When placing the icons or buttons, or whatever controls you’re adding to your gallery on top of the container, be sure and align them relative to the right side of the screen. For example, when I take a look at the X axis property of the far right icon, IcoCopyRecord, it has a value of 1293. Change it to:
Parent.Width – Self.Width – 15
I subtracted an extra 15 pixels, so that there will be some space between the right side of the icon, and the right edge of the gallery.
Here is the end result. When I maximize the app to fill my desktop, and then when I make the browser narrower:
Compare those to the third screenshot at the top of this post, and how the gallery gets cut off when the screen is narrower.