In today's digital age, creating apps that seamlessly adapt to various screen sizes and devices is imperative. And it is possible to achieve that with Microsoft Power Apps.
In this comprehensive tutorial, we will delve into the world of responsive app design using Power Apps, covering crucial concepts such as containers, disabling the "scale to fit" property, and creating layouts that dynamically adjust to different screens.
Understanding Responsive Design
Responsive design is all about ensuring that your app looks and functions flawlessly, regardless of the screen size or device it's being viewed on. With Power Apps, you can create responsive user interfaces that automatically adapt to changing screen dimensions, providing an optimal user experience.
If you want, you can skip to the video lesson where I explain all the concepts and show in a practical way:
Disabling the "Scale to Fit" Property
By default, Power Apps apps are set to "scale to fit." While this keeps the app's proportions intact, it doesn't allow for responsive behavior. We'll guide you through the process of disabling this property, unlocking the full potential of responsive design.
Exploring Container Basics
Containers are instrumental in organizing and arranging elements within your app. We'll introduce you to three types of containers in Power Apps:
- Horizontal Containers: Ideal for arranging elements side by side horizontally.
- Vertical Containers: Perfect for stacking elements vertically, creating intuitive layouts.
- 'Free' Containers: These versatile containers allow for flexible positioning of elements.
Harnessing the Power of Containers
You'll learn how to effectively use containers to group, organize, and control the positioning of elements within your app. Containers provide the structure needed to create responsive layouts, making them an essential tool for your Power Apps journey.
Creating Responsive Headers
One of the first steps in building a responsive app is creating headers that adapt to the screen width. We'll walk you through the process, ensuring that your headers look great on any device.
Mastering the Principles of Responsiveness
Throughout this tutorial, you'll not only gain practical skills but also a deep understanding of the principles of responsive app design. You'll be equipped with the knowledge to create dynamic, user-friendly apps that adjust effortlessly to various screen sizes and orientations.
Conclusion
Responsive app design is a skill that's in high demand, given the ever-expanding array of devices and screen sizes. Microsoft Power Apps offers you the tools and flexibility to meet this challenge head-on. By following this comprehensive tutorial, you'll be well on your way to mastering the art of responsive app design, ensuring that your apps provide a top-notch user experience, regardless of the device.
Start your journey towards becoming a responsive design expert with Power Apps today! Stay tuned for more tutorials, tips, and tricks to enhance your app development skills.
Remember, in the world of app development, responsiveness is the key to success. So, let's get started, and together, we'll create apps that shine on every screen!
Here is the video transcripts:
Hi there. Rudi in here. And in this series of videos, we are gonna learn about gallery design in Power apps. We are gonna do this example. Look at this gallery right here on my screen. The interesting thing about this gallery is that this gallery adapts to the width of the screen. What I mean by that is that if I resize my browser, if I resize the instrument, the the browser, the screen that I'm using to play the app, the gallery will adapt to this new screen. Look at this. I will just resize to have a lower width, and then we can see that the gather has the same width as the screen. Again, if I resize and increase a little, we can see that the gallery adapts. Also, we can see that the values are aligned with the headers. It doesn't matter the width of the gallery. They are always aligned. Another thing we can notice here is that when I decrease the width of my screen below certain amounts, The text inside the gallery will also decrease its size, so it will fit better to the screen. Let's see. I will just decrease now, and we can notice that the text are smaller, the phones are smaller. And another thing, another curious thing is that if I decrease even more at a certain point, together, we will stop adapting it with the screen size, and then we are gonna see this scroll bar here in the bottom. So we can see that we can now scroll to the right. In this case, the gallery is wider than the space that it's inside. So we are gonna learn how to do all of this, how to make the text, change the size, the screen the width to adapt to the screen, and make this horizontal scroll bar to appear when the gallery is larger, is wider than the space that the gallery is inside. In order to do this, we will need to learn about containers, very important, positioning of things And also, what's the last point?
Okay. I just remember, also about the breakpoints, size breakpoints in Power Edge. Maybe you have never heard about that. Let me know in the comments if you know all of those 3 are if you are missing only 1 of them or if if if you don't know any of those. Since they are all different and important topics, I'll separate the explanation in several videos and puts in a playlist so you can watch sequentially. If you know 1 of them, you can just skip to the next video and go to the parts you find you think it's important. So let's get started and I will put right now the first video where I'm going to demonstrate what's the data source behind this gallery and I'm going to create the gallery just to connect to the data. So I see you in that video.
Olá Amigos. That means "hi friends". Let's see, right now, What's the structure behind what I have here? What's the data we have? And then you can replicate on your side something similar or you can use on your data, but let me explain what I have right here. We can see the zap. And this app is the inventory management app. I'm building some students that I'm doing private lessons. Okay? We have a home screen with the list of inventories. The list of parts that compose an eventry so 1 eventry can have these parts right here. The parts have a description That's a name, actually, the part name, the size, a model, and a class. And we have a list of inventories. That represents the locations. It's the same as we saw in the home screen, the list of inventories here. So here we can have all the inventories that we want our app to manage. For example, have 3 locations, and these locations in the future will have parts associated to them. The app's in construction, it's a very very early stage. But for the gallery, we already have enough here. Let's see what we have as the data source. Behind it. Here, we can see the data sources on my app. I have 3 tables. Those are data first tables. For the parts, the table that we are going to use, it's called inventory parts.
Don't worry. If you don't have a database, you can use a SharePoint list or even an Excel file or what whatever source of data you have connected on your app. That's my case. If I click here on add data, I can see what's the data I have on my table, so I have a description, a class, a model, a size, and a picture that represents the picture of the object. Also, there's 1 that's another column that I'm not showing here. Let me just get it. It's the name. No. It's showing. It's actually here in the left just hidden here. So I also have the name. I'm not showing the item description, just name, class, model, size, and picture in my gallery. And those are the columns I'm going to use in the lessons. Okay. So here, this gallery is already implemented with all the configurations we need to make it fit the width of the screen accordingly, but I'm going to create this gallery from scratch in a separate screen just for you to see the process if you don't know how to create a gallery and also the labels that will represent the headers of the gallery. This gallery looks like a table and we have this header that is composed of several labels. But I'm just going to create from scratch without any configuration. And then in the next class, we are going to learn about containers and what they are used for because you're going to use them in this example that I'm going to be teaching through the playlists. So let me create a blank screen. So I'm going to screen and create a blank screen here. And then I'm going to create the labels that we mean the headers of the gallery. So we have this label and we have the names, the detects inside the label. The first 1 is item.
Let me just check-in the previous screen description. That's actually his name. So I just we'll just change the name here. Just to make it make sense. Name, size, model, and class, returning to my new screen called screen 1. Let me search other labels. So name, change the text to name. Size, another label called model and the last 1 called size. K. Size. Size. You can also construct only our side with our data because in the end, we are going to reuse these labels to build the end result. Okay? As a good practice, it's good to rename things because the name right now, for example, this 1 is label 7. It doesn't mean anything. So I will call LVL, Item title. Let's now rename the second label to LDL named title. Name just lost its text inside its Third label, LBL, size title. In this case, I already have a label with this name in the other screen. So Let me do let me make it with a different name. So l b l size. Oh, Item size title. Item size title. Okay. The next 1, LDL. Item model title. And then Item name, size, model, and class. This one's class. It didn't change before. Maybe I typed too fast. K. Class. So let's call it LDL item class title. Okay. Now that we have the labels with the names, I suggest you to put the same names because when you're going to follow the example, you have the same names as I have, so the formulas will match. Now, let's insert a gallery. To show the data. So I'm going to go to insert, vertical gallery, and the gallery view appear here. Button just position below the titles, resize it a little. And then let me connect to my data source that in my case is called inventory parts. Okay? It already brought me the information some of them, the name and the description, and the picture, the image So very good that I don't need to connect to those I already have. I don't need to insert them. But actually, I want to use the description here I'm going to use the size model in class. So I will copy this. I will move this below the size. This 1 I move below the name. Just a line in this way right now. Not using any formula, but in future we are going to be using to make it adapt every time we resize the screen. And let me bring the values I actually want. So instead of this item dot item description, I'll put this item dot size. If you don't know much, how a gallery works. I will put a video here in the cart somewhere in the top for you to link and watch it and understand better. Because it's a very important concept in every apps. Okay. Let me start a new label or copy from these ones or copy and paste. And then put the loading model and just change to this item dot model. Okay. 1 last time, 1 for c control v, and then below this item, below the class, I will put this item dot class. Okay. There is this icon here to select the item in the gallery. I will just skip. As the example, just leave it here because in the future, we will want to add it to this part. Right? So we already have all the fields we need, and we are able to see all the data in our gallery. Okay? The labels are just misaligned. I can select all of them. Right click and then I have here a line. Aligned top, for example. See, so they view a line in the top. Then I can move them, and they will they are aligned right now because all of them are selected. K. Very good. We have this gallery. It's a fixed size. It doesn't adapt to the width of the screen. We need to make it adapt. So we can see in the next video, these things related to making adapt to do with And also, we can see that this app is stretching occupying the host base that it has in my browser. By default, it doesn't come like this. So I will show how I enabled the app to stretch. And then we are going to see containers. So everything in the next video is going to be very important. See you there.
Olá amigos. That means "hello, friends". In this video, we're gonna talk about responsiveness and containers in our apps. Very important concept. As you can see now in my screen, we have this app that's adapting to the full width of my screen. It doesn't matter if I resize the browser, the app will adapts to the size of my browser. See, if I increase the high, the app will increase the high. If I decrease the width, the app will decrease the width. But by default, it doesn't come like this when you create a blank app, a blank canvas app. We have to disable a property to make that start adapting. Let's take a look at my app right now that I haven't disabled this property. The app is as it comes by default. We see that as we resize, it will keep the proportions and resize the size of the canvas the canvas inside the screen to keep that size that's proportion. And that doesn't adapt to the existing size of its container of the browser in this case. Okay. It's good because it will always have the same proportions. It will always look like that. In the moments that I disabled this property that we're going to see soon, the app will behave like this, see the same size, but it behaves differently. It stretches, it shrinks, and so on. And with this great power, we have great responsibility because it's not as simple as in the this original way, you have to think about resizing about the size, about how things are going to adapt.
So for our example, for the galleries, you don't need to disable if you don't want. Because if you have already 1 app that you developed, in this way that it doesn't stretches to the side of the screen. When you disable that property, it won't behave well. That needs to be thought since the beginning. To make it behave well if you want it to be responsive as they wanna just show in my example. Okay? So let's see how to disable. It's not necessary to do this to go understand the concept and to do the exercise that I will be doing in the next videos. If you don't know if this video is from a playlist where I'm talking about gallery design, and this is 1 of the videos. So you may take a look at the first comments that I teams here. My comment with the link today's full full playlist. And if you didn't know, please start from the beginning. You will learn a lot. Okay. In order to make the app behave like this 1, we need to go to the settings of the app. I'm going to click here in the settings, in the top, in this bar, or we also have the settings here in the left in the bottom. K. If I click to here and I go to display, I can disable this property, scale to fit. Okay. Once I disable the app, won't scale to keep the same size hours. It will just stretch as the size of the browser or the device that's playing the app. So I'm going to disable here. And I can close. If I hit play, I'm going to see that now the apps behaves like this. So the app will stretch to occupy the full space. Okay. Now we should go back to the gallery we were building to make the gallery behave as they have the app now is behaving. So we want this gallery to stretch to the size of the screen, depending on how I move, how I resize my screen. Okay?
So we are going to work with the width property. In this case for the gallery. But for this case, since we have several labels and we also want the labels to occupy the full width of the app, we need to understand about containers. Let's take a look then at containers because right now I talked about containers and talked a lot, and you didn't see any container yet. So Let's see what they are. In order to do that, let's go to a blank screen. So I'm going to create a new screen blank. Okay? And let's go to insert. We have then inside the layout. The containers, we have horizontal container, vertical container, and just container. We can also add containers by clicking here in this plus icon in the left, and then we can search container. But if your language is another, then we don't have layout. We have other word in there. Right? So but container, I think they will have this name. Okay. Let's add the 3 of them. So click in the horizontal vertical and then just the container. Actually, I cannot do that because they are going to insert 1 inside the other. We don't want this right now. Let me delete. So I need to click in the first 1, so enter horizontal, then just unselect it. Click out of that container. Add the vertical 1. Let me just drag here to the sides. And then select again and click in the container, the last 1. We have 3 types of containers here. Okay? I'm going to start with this first container. The number 1 that's not horizontal and not vertical. We can look here that they were inserted. Individual inside is screen 2, and they have different icons. The first 1, it's a con container that it's a free container. It's not horizontal. It's not vertical. It's just do whatever you want to fit.
A container basically just as the name says, a container. It's like a bucket that we can put things inside. I can select the container and add, for example, a button. I can add again a rectangle. I can add gallery if I want a date picker. So I can move things freely inside the container. And if I move the container in the screen, everything will move together with the container. It's very good for organizing things grouping things, but they have this free positioning side, the container. Okay. For the vertical and the horizontal containers, we can also insert things inside. So let's go to the vertical 1 here. Let's again insert a button, a rectangle, and a date speaker as I just did. To have the same example, date speaker. Okay. Now we can see that the things were inserted 1 below the other. So it's since it's a vertical container and I cannot drag and move things inside it. The position, the arrangement of things inside the container is locked. The same happens to the horizontal container. So if I go any sort of button, then rectangle, and then update speaker, Things are going to start appear horizontally. See that they even they are wider than the container, the server of all the width They are going to disappear here, but inside the container. K. If I widen this container a little and remove the other from the front of that 1, I can see the date speaker here. Okay. These 2 containers, the horizontal and the vertical, decrease the flexibility, but increase the organization of the things. For example, if I get this vertical container and increase its high with so we can see better the example.
So here's the container. We have some properties here that we can align things to the center automatically here both vertically or horizontally, we can put a gap between things. So for example, 16, things are going to separate evenly. We can make the objects inside it, take the width stretch to the width of the container automatically and other properties here that we are going to see through the lessons. Possibly. And then we can if we resize the container, things all the things inside it are going to resize too. See, we can also, for example, if we click in the button, we can make the button have a flexible high So it will occupy the remaining high of the container. Same for the rectangle. If I make the rectangle to have a flexible high, Both the rectangle and the bottom will occupy the same high because it's going to do the calculations automatically.
To make the highs to be the same. Okay? And we have other parameters such as minimum high and and so on. Same for the horizontal container. We can make the things to be distributed evenly if you want. Or we can make them have the same high as the container. They can stretch. See, if I decrease the size of the container, the things are going to decrease the size 2. And we can also make the container wrap for example have more lines. It's horizontal, but we can have more lines if we click on wrap. And something here has a big width for example, this rectangle, let's say it has 400, then the container will auto adjust the things inside it. And with these configurations, we can do very clever stuff. 1 extra thing is that both the container horizontal and vertical can be changed the way the direction of it. So in this case, I have a horizontal container. If I think that's better vertical container, I can change the direction here in the properties and it will become vertical container. Let me just disable the rep here, so it becomes totally vertical with the things vertically distributed inside it. Okay. Right now, it doesn't look so useful yet because we didn't see any application. But know that those are the basis of the app that auto adjusts. So in the next class, we are going to use our first container to go back to this screen and make these headers for the gallery To adapt its size and occupy the width of the screen, doesn't matter what width it is. And then we are going to see 1 of the first principles of responsiveness. We're going to have our first header that's responsive. Okay. So see you in the next video that I'm going to put the link right now.
Hello. In this video, we are gonna use the horizontal container to do our first use of the container in a practical situation. We are gonna get these labels that are supposed to be the header of the gallery and make them distribute equally through the screen based. It doesn't matter the size, the width of the screen. So it will auto adapt. It will be responsive. Okay? Let's go and insert a horizontal container. If you don't know what it is, look at the previous video and display list because I explained a little bit. Now we saw the theory. Let's see. Let practice. I'm going to insert a horizontal container. So a horizontal container. Let me just resize it a little bit and let me let me put here in the bottom because the other things are here. Just resize maybe the gallery then move this down and I can plug the container back to the top. It's better in the top right.
Okay. Let's get these labels here. Cut them and paste inside the containers, and when select all of them, press shift and clicking. Then I'm going to press control x or click in the right button and click on cut and I'm going to go I'm going to click in the container right click paste and the labels are going to be pasted inside the container. Okay? Now we can see that it's a horizontal container. The labels are in the top, aligned in the top because I In the configuration here, the vertical line is in the top. We could have in the middle, in the center, or make them stretch to occupy the full size of the container. It does we don't see any difference, but they stretched if we click in the individual ones. Okay? Let's skip in the middle. Maybe it's better to see how the labels are distributed. If we give some background colors to the labels, usually, when they want to differentiate things in the screen and just put some background colors temporarily, so you can see them better. I will select all the labels and change the color here, the background, the color to this light blue color. Then we can see the labels better. And we can, of course, now make it stretch and see the difference. Okay? Just keep in the middle. We see, for example, that the labels are the sum of the width of the label is bigger than the container because the class label is missing a part. See, if we decrease the container, it gets even worse. But if I increase the container, I see that I have a blank space here. And in order to make them to just adapt, distribute easily, we could just select all the labels and and mark here the flexible width, and they are all just going to adapt. So if I resize the container, they are going to adapt together with the container. But notice that there is 1 point here that when they decrease the container, it doesn't do anymore. That's because once I selected the flexible width for the labels, let me select 1 of them for example. And if I check here, I have a minimum width parameter.
So it means that when when the size of the container is smaller, the label will keep 150 pixels width. If I want to make them shrink even more, I can select all the labels and change to a hundred, for example. Or 50. Oops. I just put a big number. 50. See, they are just going to attach until it gets to 50, and then it will stop decreasing the width automatically. Okay? So this will make them adapt the same size as the container. If we want to put some space between them, between all of them, we can just put a gap here. Let's say 1, we could just put a very small gap in the labels. We could put, for example, 16, a bigger gap. And that will do automatically in the middle of all the elements that I had inside my container. Okay. So we have something that already does automatically. If I play the app, remember that 2 videos ago or the previous video, I think. I disabled the scale to fit, so the app takes the full width of the screen. And now, I also want that this container takes the full width of the screen together there. Okay. In order to do that, we just need to play with some parameters, the position and the size of the container. Okay. So first thing, I want the container to be in the very left. So the x of the container will be 0. So it starts when the screen starts. And to make the container occupy the full width of the screen, we need to tell the container that its width will be the same as the screen. So we are going to click here in the width property or select the width property here in the formula bar for the container. And instead of having a fixed value, Let's make it have the same width as the screen, in this case, as the parent of the container. The screen is the parent of the container because the container is inside the screen. K. This is a concept we use a lot to refer to the with and high of the parent's control. For example, this first label. What's the parent of this label? Is the container 11 because it's directly inside the container.
If we look at the gallery, for example, This image, what's the parent of the image, is the gallery because the image is inside the gallery, and the parent of the gallery is the screen. So we refer a lot to this parent's property. If I click in the container and I tell that the width is parent dot width. I will tell the container to have the same width as the screen. So now if I play the app, I see that the container occupies the width of the screen. And if I resize the screen, The container will also resize its size look. So it's being responsive to the size of the screen. Okay. Here, I I'm not liking that this label is too to the left, too much to the left. And same to the right, there is no border here. We can easily do selecting the container and we have the padding options here. The padding left, for example, let's put let's say 16 and also the right 16. It will make the labels go a little more to the center and that distance between the labels will change automatically. So that's a very good thing for the container. It does a lot of stuff automatically. Okay? So Let's pay attention that we have a formula in the wheat property. But if by any reason, we resize the container, it will lose that lose that formula and put a fixed number again. So once you set a formula, try not to drag things again because they are going to lose that reference. Let's put back the width as parent dot width. In the y, I will put 0, so like it was in the top. And I'm going to do the same for the gallery right now. So if I put the gallery here below this header, I can make the gallery occupy the high and the width of the page. And since my app my page is stretching to the same size as the browser. It won't work very well because once I hit play, The screen will increase its size and height, and the gallery will keep the same width and height because it's not dynamic. So I need to go and play with the properties with and hide. Let's do. So let's select the gallery. In the width, let's use the same formula as the container. So parent dot width.
Here, I'm just going change the background of the gallery so we can see it to working. Same way as we did with the labels. Let's put this light blue. And then if I hit play, I can see that the gallery occupied the full width, not the high yet, it seems to be occupying the same height. But if for example, I decreased the zoom of the screen, I can see that the high now of the pages higher and the gallery is not stretching. So in this case, we need to put the formula in the high of the gallery too. So in this case, it's going to be pairing to dot height. Let's select the gallery And let me just recover this 1. In the height, let's put parent dot height. So the gallery view have the same height as the screen. Now if I remove this zoom, we can see that the gallery is occupying the full size of the page, but there is still 1 thing because I put together to have the same height as the page, but actually we don't want that because the gallery already starts in the position 9 to 7. That's the y of the gallery. So in this case, the gallery is being bigger than the screen.
And if we had the gallery full of items, we might lose some items in the end that are going to be outside of the vision of the user. So instead of having The same height as the parents, we need to remove that part that's being occupied by the container 11. So in this case, we could do prior to the height, last, then minus, sorry, minus container 11 dot height, and then it will occupy the full space, the full remaining space in the screen that the gallery can take. Okay? We didn't need to do this harmless if we were using more containers, a combination of containers. And we are going to see this in the next video. We are going to take this to the next level, making it look like this 1 that I have in this screen, where we have a container here, a gallery, and both are inside a vertical container. So they are going to adapt automatically and I didn't need to worry about the formulas in the height of the gallery to make it adapt because it can stretch to the side of the container. So in the next video, we are going to do exactly that and have it formatted as we just saw here, occupying the full screen. Okay. So see you in the next video. I will leave the link right now for you to keep watching.
Olá amigos. Hello, friends. In this video, we are gonna continue our journey towards the flexible gallery. The gallery that we adapt to the size of the screens. Okay? So Here, we stopped at this point where we have a header and a gallery that is already adapting to the size of the screen. But I mentioned we could do better because in the previous video, we had to work in the width and height of the gallery and put some formulas here to make it work. And I mentioned that if you work with nested containers, that problem is solved. And just to show you how nested containers are actually used. Look at the screen that I have here. We can see that we have container in the top container in the left container in the middle. And if we look again, the main structure is a container and all the others contain it, all the other tankers are inside. It's actually the header container, then they have 1 container with 2 containers inside. So it's widely used. And this screen, it's even generated from a template screen that we have here in the new screen, and we can select sidebar. This in the screen that I used, the model I used to build, this adapter, this screen here, this responsive screen. K? But this is for a leader. Let's look how we can do exactly like this. Look exactly like this. Using containers. So let's go back to the screen number 1. And we see here that we have a container in the top that's the header and a gallery, and I mentioned that we could use more containers So what we are going to do is we are going to have a container with this container inside and the gallery inside it. So I'll just resize everything. They are going to lose their their formulas that we did in the last Video. If I play the app right now, we are going to see that they don't adapt anymore, and we are going to insert a virtual co container to press them and find it. So I'm going to go here in the plus icon. Search for vertical. Select it. I will just make it bigger. Leer, we will need to put some formulas here in the container to make it occupy the full screen, and we already know the formulas based on the previous video. From the playlist. Let me do a counter x on this container as a whole. Thing and then then just paste here control v. It's pasted inside the container. We barely see because there is the gallery also behind it and the container is transparent. So let me change the background color of the container.
I have the container selected. Let me see if I got the correct container is container to help you. It's the new container in my my case called container 12. And the container if the headers called container 11. Let's or let me rename this as a good practice. So let's call bone header. Example. Example, in my case. And for the outside container, I will call call main container example. Exactly. K. So for the column main container, just put in the next dress. Container example, I will put the color as white So I will see it better or even maybe another color, gray color so I can see the container better number a. K. If I click on the container now, I see that I have another container inside it, and this container is actually occupying the full size of the main container. Let me remove this flexible height here. So now it just has its fixed height height that's 74. Let me change to 60. And let me make it a stretch to the size of the main container. So in order to do that, we need to make it stretch here in the align container property right below we have this stretch that we stretch to do it. So it takes the width of the container. Doesn't matter what it is. Okay. Now we can just Cut the gallery and paste inside the main containers, so control x to cut, and I'm going to paste here. Selected the main container and paste it. 1 thing that happens out of all the time, until the day that I'm recording this video, is that the things lose their their position. The reference for position and go all to the 0 inside the gallery. It loses the the main the normal configuration that it had before before when it was outside the container. I don't like this because now I have to we have to do manually. And organize again. But that's okay. It's part of the game. I'm sure that some points that will be fixed So if we know that we are going to have this structure, it's better to have since the beginning and create the gallery already inside it in figure it. It's okay. Let's just move things, but the them in the correct side correct, please. So here's the model. This is the size. This is the glass and the the name. Later, we are going to work on this format. So I just put like this, and then we're going to work in the form as to position correctly.
Okay. Now we have the gather inside the vertical container. So we have the vertical container, then the horizontal container inside it. That's the header. And the gallery together with the other container. The gallery has already flexible height, has the threats activated, So it will it will automatically take the remaining size inside the container. And we don't need to worry about the farthest because it will automatically stretch to the remaining space and we don't have to push the parent dot width and parent dot height in the gallery, for example. But the last thing we need to do is We need to make this container, take the size of the screen. So let's position it in the very beginning and for the only for the main container, we need to change the width to parents dot width. The height to parent dot height. And now we have the app behaving very responsive. Okay. Yes. The only thing we need to do is now make the logic for the values here inside the gallery. To align with the labels in the top in the header. So in the next video, I'm gonna show this formula and always that we move that the header size, the values are going to be aligned. And then we are going to start thinking about how we are going to do to make the text decrease the font if the screen is too narrow. So I will leave the link to the next video right in the end of this class. If you arrive until here, please leave a comment in the the video about what you're thinking about these classes. And with any suggestions of improvements or future contents, It's very important to me that you participate and you interact in the lessons. See you there in the next class.
Hi there. Let's continue with this formatting of the gallery that we just stopped in the last video where we learned about containers, we learned and practiced it, putting everything inside a container that's occupying the full width and height of the screen. Now, we are going to do this alignment of the labels inside the gallery with the labels in the header and make them always aligned. It doesn't matter the size of the screen. That the app is playing. Okay? So we are going to act inside each label together. We are going to put formulas in the x and in the width properties of each label. We have the gallery right here. We didn't rename yet. So let's rename, let's call go items example. And we also have the labels inside it that we didn't rename. Let's rename at least the labels that we are seeing here in the app. This 1 will be item name. So LBL item name. This 1, it's the item size. So l b l item size. This one's the model. So LBL item model and the last 1 is the class LBL item. Class. It's very important to rename because then when we look here in the left, in the preview, we see the things with their names and we understand what they are easier. Okay? Now we want for example, this label to be always in the same position vertically as this label here in the top. What we are gonna do is we're going to make the x, the position, the x horizontally, the horizontal position of this label to be the same as this 1. So let's get the name of the label in the top. That's called LDL named title, I will copy, control c. Here, I'm going to click in the label inside the gallery and I'm going to go to the x in the position property. So click index here in the top. I'm seeing that there's a number, but let's put to have the same x as the label in the header. So name of the label in the header dot x. Let's do this to all the other labels. And then we use we are gonna see what's going to happen. We see that this first 1 is already aligned Let's see now for this 1, the position the size label. I'm going to get the name of the label. That's the header for the size control c here. In the x, let's put it to have the same x as that label.
So name of the label dot x. We see that it's already aligned with that label. It shows this error because when we just pasted the name here and you didn't put dot x, it was not bringing a number and or apps just complained because that wasn't a valid number. Just put in the name. But once we put dot x, it worked that so that error is just an error message that appeared, but we we haven't finished the formula yet. So it's thought we had finished and showed as an error, but it wasn't because we were going to dot to put dot x. Okay. Let's do for the model. I'm going to select and copy the name of the label in the header and in the x property of this label, I'm going to paste input dot x. See the error message appearing again, but it's because we didn't have the dot x at that point. Why didn't it apply? Okay. I clicked the wrong thing, maybe. Model, item, model title, dot x. Oh, I put in the width, I put in the wrong place. Let me remove from the width. Just sets 200, let's say, and then put in the dot x. So in the x property and paste here. K. Now it's aligned. And for this last 1, so let's get the name of this label. LBL item class title. And here in the x property of this label inside the gallery, just paste and dot x. Now, the labels are always aligned vertically. They have the same position in the x as the labels in the top. If I play the app, I can see that they are aligned. And now if I resize the screen, once the labels in the top would be resized because they have flexible width as we put in previous classes, The others will align vertically because they are referring to the x positions of these labels. 1 last thing that we need to do here is to make them align vertically. So they are all in the same Same high. So let's select all of them. Right click. Aligned, aligned to the top. We can also force them to have the same heights. They have already 49, but I see it's too too big. Right? We can click here in the auto hide. So the hide we will adapt automatically. If the text is bigger, then it will grow vertically at this label as we can see here in the ear protection earbuffs. 1 last adjustment we can do, not 1 last 1, another adjustment, is that we can make this label have the same width as this label in the top. So we give extra space for for this 1, for example, because right now the width is this. And we would have this empty space here that we could use to show text to. And if the width of the top 1 decreases, This 1 right now is fixed and it won't decrease. So let's also link the same width. Let's make the width of the label inside the gallery. Have the width of the label in the header. So I'm going to click again in the header label, copy the name, and now in the width property, Of the label inside the gallery, let's change to name of the label in the top dot width.
And we can see that its width is the same now as the width from the label in the header. Let's do further for the other labels inside the gallery. So I'm copying the name of this 1, the top. Going to the 1 side, the gallery, the width control v dot width. So now it has the same width as the label in the top. Next 1. Madhu. Control c with control v, but with I'm doing quicker because now you already understood what's the process, so we just need to do there. Now for the class, copy the name, input in the width property of this label here. Dot width. Okay. Now they all all of them have the same width as the 1 in the top. Here, we see that this label is too wide. We don't need that label to be so wide as it is because the image has always this size. We could make it bigger. Let's I don't think it's worth it. Let's imagine we want it to have always a fixed sized of 60 by 60. I just changed here in the right, the width and the height. Okay. So we don't want this label to be so wide. Let's deactivate the flexible width for this label. Since it's inside a container. We have this property. We can disable and then force it to be, let's say, 70. So it will always take this size. It won't enlarge. It won't get widen as the screen gets. Because we we always have this size for this column. In the others, we'll keep adjusting because the flexible width is active for them. Now it looks very good. Imagine that the name we wanted this 1 to be always bigger than the others. Let's remember that we set the minimum width for all of them as 50. We could put this 1 for example to be a hundred 50, so it won't get smaller than this because the name usually, it's a bigger string bigger text. Now, the minimum size will be a hundred 50 as I just set in the minimal minimum width. Let's play. And decrease the size of everything. And we can see that the others have a smaller size than the name header because we put a minimum width that's bigger than the others. K? Very good. Now our gallery is already adapting almost very well. There is 1 last thing that we want to do. That's when the screen is too narrow. We want the text to decrease the font size Okay? In order to do this, we need to understand a little bit better about 1 property. That's the size of the screen that's showing here. And we have something that helps us that's called size breakpoints. Let me see how big is this video. Okay. This video is getting too big. I'm going to teach this in the next video. Let's just do 1 final adjustment here. That is we can now remove the background colors for the labels here in the header, for example. So it looks nicer. And also remove the background color of the gallery if we want. And also put the headers in bold letters. So let's do that. I'm going to select all these labels. Change the font weight weight to bold. And remove the background color. So I just put white actually. Yes. No. No. That maybe it's better to put transparent. So it takes the same color as the background element. So here, I'm going to push transparent. I don't know why it's not getting the caller If I go to the view property, it should be color dot transparent then. I don't know why it didn't work in there, should work. But let me type here.
So I just went to the few properties of the labels, input caller dot transparent, that it would be would happen here when I clicked here in this view icon. I don't know why, but okay. It works like this. Okay. Now it's a little better already. We have a header and we have the gallery here. We can also decrease a little the high of each line of the gallery gallery. So if I select the gallery, we have the template size property. Since the gallery is inside a container, I cannot drag here. It doesn't work. It's locked. I need to select the gallery, go to the template size, and change here. Let's say it's 80. K? Now it looks a little better. Let me just place the image a little up. And we have this separator that's a rectangle, let me decrease its high. Let's put 4. Okay. Okay. So now it looks better. And last thing before we finish this class. Let's put this icon that's floating here in the middle of the gallery to be in the very end. But how can we do that? If the end will change according to the width of the app. We need to put some formula here also. So I'm going to click in this icon. If I move it to the end, it won't work nice because if the screen is bigger, then it won't be in the end. So what we can do is we can refer this based on the width of the gallery. So let's say the position, it will be the very end of the gallery, so that means the x position of this control, the icon will be parent dot width because we want it to be in the very end of the gallery, parent dot width and the parent in this case is the gallery that this icon is inside, so it went to the very end of the gallery, but after the gallery. Now we need to just move it back to the left Aliro, and this amount is its arm width, the arm width of the icon. So in this case is minus self dot width. In this case, it will go to the very end minus its width. That it means it will be attached attached to the right of the gallery. And if the gallery changed the size, it will also change the position based on the width of the gallery seat. Now it's always here in the right. So if I move that icon will always go together. Okay. Now we are ready. To make the changes in the text font size based on the screen with see you in the next video, I will leave the link right now so you can click to the next video and watch together with me. See you there.
Hi there. We have this gallery right here with a header, and everything is just adapting to the width and height of the screen that's inside. So it's a very flexible gallery inside our apps. That we learned how to do in the previous lessons in these playlists. Now we want to do 1 adjustment that is when the screen has a smaller width at a at a certain point, we want to decrease the size of the letters describing labels. So we wanted to to to have a smaller font size. How can we do that? Okay. Let's take a look. Out at 1 property here that has the size of the screen. Okay. I'm going to search a label. And here in this label, I'm going to put this information app dot active screen dot size. K. We have 1 number here that represents the size of this screen that's currently showing the active screen. See, we have the app. That's the whole app that explains 1. Property we can access. Then we have the active screen, and that's a control with several properties inside it. We can get the current screen name for example, and we can get the size of the screen. Right now, it's showing far. What does it mean? Okay. Let's play the app and see what happens. Right now, this size of the current screen is 4. If I decrease the size, the width, for example, right now, it's showing 3. See, it's showing 3. If I decrease more at a certain point, we'll show 2. And then if I go even more, it will show 1. So 1 stands for small, 2, medium, 3, large, and 4, extra large. Basically, what's happening here is that power apps detects the size of the browser or the device and then informs through this property. What's the current size? K. So in this case, I'm using an extra large screen. If I decrease more, let's say, it's a tablet. It's a large. If it's if it's a smartphone, It's a small screen. Okay? 1 point of attention is that if we use this in the play mode, this function here, that select the tablet for example, we can see as a tablet or we can see as a phone. It doesn't actually change that number. I can not to working here. It's not showing, but it will take the last number that was in there and it won't change.
It needs to be the window size or the canvas size to work properly. I've tested before and worked in right now. So let's put to 1 and then change to a tablet. It's still 1 showing there. See, it didn't change even though a tablet's 3 or 4. So right now, it's not working maybe in the future. Microsoft has solved that. Okay? So if you keep changing here, that number you cannot trust right now. K? If you want to really test for a device that changes size, you need to keep in the window size and then just resize here. Or there is this other option that's right click go to inspect. And in the browser, features, we have 1 place here where we can simulate device sizes. If I click here, for example, and choose to be the dimension of I an iPhone, then it will detect and show us an an iPhone dimension. That that 1 inside perhaps right now is not working. Okay? Right. So what can we do with these sizes? Well, we can put a condition in the font size of the labels based on this size, based on this screen size. So I will select all the labels inside the gallery. And in the font size, I will do the following if. App dot active screen dot size it's bigger than 2. It means if it's a 3 or a a 4, if it's a large or an extra large, then the font size will be 13. Otherwise, it will be 11, let's say. So I'm going to close the parenthesis. Hit play. Right now, it's 4. So for 4 or 3, it will be 13. Once I start changing and it becomes a 2, it will go to 11. So I will keep decreasing. Until it gets to a number 2. C h 2. We can see that the font sizes just decreased If I go a little bit wider and go back to 3, then we have a bigger font size. So For smaller screens, now it's adapting and it's decreasing default size and looking better. We can do this also. For the headers. So let's go copy the form we put in the label, select all the headers, I'm pressing control and clicking and then go to default size and paste the file. K?
Now let's see again. It's working. K. Let me just so now it's 11. Because it's number 2 here, the the screen size is number 2. And then we can increase until number 3. And the fonts will increase together with the size of the screen. Okay? We could improve the formula even more If we wanted, for example, for a screen size number 1, we could put, for example, that the font will be 9. So let's say, another condition here in the if this 3 size is equal to then it's 11. And the last condition, if it's not bigger than 2, if it's not 2, It will be 9. If you have any questions about how to use the if function like this, I have also a video on my channel where I explain. I if I remember our put here in the description or in the first comment, they'll link to that video. Okay. Now or smaller screen size, the size small number 1 will have a small font. So let's see. Let's go until the number 1. See, the headers just have very small points now. Phone size 9. Let's also put this formula now in these labels inside the gallery, and we will be done with this configuration. So I'm just copying this formula. Selecting all the labels inside the gallery and pasting it in the size property. Okay. Let's play. And decrease the size here. So we have size number 1. The font is 9, number 2, response 11, number 3, or 4, the phone will be 13. So very, very nice. Okay. Watch defines the size. So when it is very large screen, when it's a medium, when it's a large, and when it's an extra large. There is 1 property here inside the app if we go to the trade view here in the app, we have this property called size breakpoints. So here we have 3 size break points. It means smaller than the first ones, smaller than 600 is is small. Between 609 hundred pixels is medium. Between 903 hundred is large, the number 3. And greater than 1200 is extra large, the number 4, and we can change these these numbers. In the other screen, I have created something for us to visualize better how it works. So right now, this shows the areas where the sizes apply. So here is 600 pixels. It means before this position this width is number 1 that's small. If it's between 600 that's in this position here and 900 that's this position here, Between these 2 points is size number 2, between 912 hundred It's large, so it's number 3.
And after 1200 is number 4, and I could change in the configurations. And this size would change in the app. If I just resize here, we can see it to working. So for example now, that we have this width is number 4. But if a decrease and gets to the area that's green, it's the size 0.3, So q in size is is 3. If I go to the 2, if I keep keep making it narrow. We will reach the red area, so q and size is 2. If I go to the app properties and change it, it will change how the app behaves and how it recognizes the different sizes. This is the default, but I could have changed to, let's say, 400 and then 801200. Now all the ranges are the same or 400? And we I can see that it's changed. And now the app, we respect this configuration. So, for example, Let's go to the wider 1. If now I keep changing the width of the browser, it will use those values to determine what's the size of the screen, and this will apply to the formulas that we used in that gallery. You can use the default 1, but now you know that if you need to change for some reason, It's located in in the size breakpoints properties of the app. We are ready with our gallery regarding sizes and positions. Now there is 1 less adjustment. That's when we have a small width. We don't want the gallery to keep shrinking, we want to stop at some point, and then we want to show a scroll bar in the bottom. So I'm going to show you in the next video how we can have a scroll bar when the gallery is wider than the screen or the container that it's inside. Please share your thoughts in the comments because that helps me a lot to prepare the next classes. So I see you in the next class.
Hi there. In this video, we are gonna talk about scroll bar or horizontal scroll bar. In this case, we have this app. And when it reaches a minimum point, we no longer want to reduce the gallery width. And instead, we will show a scroll bar to the user. The same rule applies when we have a calendar that's too wide, for the place in which it's inserted inside. So imagine we have a gallery that needs to be very wide and the screen is too narrow. And you you want to show the horizontal scroll bar. Okay? So let's see how to do that. Let's pause that here. Once we decrease the width of the app and we reach, let's say, this point we don't want the gallery to resize anymore. We want the gallery to keep this width. But once we keep resize in there, screen, we want a bar a scroll bar to view here in the bottom. Let's see how we can do that. Okay. First, let's decide. Let's say that at this point, we want to stop resizing. So let's see what position means this. In order to do to know, I will just insert, for example, rectangle and put here, and I'll look at the x position of the rectangle record table. So let's say 500. We will stop changing the size at 500. Okay? I'll delete the rectangle. It was just to get the number. So what we are going to do since the gallery and this header, this container in the header are inside Another container, we have the property minimal width for them. So let's Choose both and set the minimum width to 500. So I will put 500 here in the minimum width property. Both of them. And now when I played the app, let's see what's going to happen. Let me just make it bigger to see. So we are decreasing the width of the app. At a certain point, it will get to 500. Maybe 500 was too little. Let's do a different approach. I will put a label. And get the width of the gallery just to know in the screen when I play the app, what happens? So I'll get the width for the gallery here. In the text property of the label, press dot wheel. And then I will play and see what's the wheel of the gallery. In the moment, I decide it's enough. Okay.
So let's say, here the width is 1500 and more. If I decrease, it starts decreasing. Here, I'm showing the width of the gallery in the bottom. Let's see then that around here. So it's 675. 500 was too below this number too much. And also, let's say, 675 for the minimum width of the gallery and the header container. 6 7 5 8. Better now. K. Let's play. And see what happens. So I have a bigger gallery once I start decreasing. It also adapts to it. But in a point in a certain point, we will get to 6 75, and it will stop decreasing. See? Now both the gallery and the container don't adapt anymore, but they don't show that part because it's hidden here the outside the limits of the screen. So let's make show this crowbar and that's very easy. Because now we have the parent's container, the column main container example. And this container has this property called horizontal overflow. Right now, its thing hides. That's what happened when we decreased the width. It's hides. Those labels that were beyond the size of the screen. Now I'm going to change from hides to scroll. So what's going to happen is when we have something inside the container that's wider than the container, it will show the horizontal scroll bar. Very simple as that. That's the way to create the horizontal scroll bar. You need to have the container with that property saying scroll, the horizontal overflow. Let's see. I'm going to play the app and I'm going to start decreasing the width. Once we get to 6 75, If we continue decreasing the width of the app of the browser, in this case, The container view starts decreasing its width, but the gallery and the header will always have and have 6 7 5. That means that the content inside the container is wider than the container itself. And that's the horizontal overflow. And then this grow bar will appear here in the bottom. It just appeared at 6 75.
If I decrease more. Everything is fine. This is still 6 75, but the container is less than that. And then we have this bar that we can do this scroll. So this is the same concept I have inside this screen here. Where is it? Type the screen. So what's happening here is that at some point, the gallery reads its its minimum size and then the container has a horizontal overflow and it's showing the scroll bar. So it's configured in the main container that's in this section of the app. Let's go back to our screen. I can delete the label. It's not necessary anymore. And we have this fully configured gallery that adapts to the width. And in a certain point, we have this scroll bar. As a left exercise, I'm going to create a blank screen not a blank list now, but using this template that's the side of our templates and I'm going to put this inside the container, the main container where it would be the content of the screen just to finish the lesson. So let's insert a new screen. Select sidebar that we were ready to start a blank screen, but with the containers inside, looks as the same structure as I have in my screen where I have things inside it. For example, in this header container, I can just insert my logo that I have uploaded in this the media part. So I'm going to select my logo just adapted in there really quick. And I could have a navigation here and I want to start the gallery here in this main container too. Okay? I'm going to go to my screen, and I'm just going to copy what's inside this vertical container. So the header container and the gallery, gone through c, and I can go there and paste in there. Where is it? Screen 3. Maybe the gallery will lose the formatting. But maybe not. Let's see. Yes. It lost same problem as a couple of lessons before. Actually, now the positions are fine, but the width got lost. So instead of doing this, I'll do a control z. And I think we won't be able to find a way to move the gallery without needing to redo some formulas. So let me go to our screen, screen 1, I'm going to Copy. The header first and the gallery. So I'll do control x to cut the header and paste inside that container, not through v. Since it has the farmers already to adapt the width, it will go fine. But for the gallery, I suspect that once we move it, it will lose the the some references. So let's do control x, cuts, and I'm going to paste here control v. See, it lost the farmers even even though we had put farmers in the x and the width of the labels. So we would need to do again some formulas here, linking to the form to the position of the labels in the top as we did a couple of videos ago in display lists that the links in the first comments. I undid the changes, and I will do 1 last try. That's copying the container, the whole container with the gathering site. So the control x in the container. Go here in this container, the main container where we we have already the header and paste the other container inside it. It doesn't work anyway. So right now, there is no way to move galleries between containers. It doesn't work well. It happens a lot, but now you know how to do the farmers. You can check the video again. And fix this. I will let as an exercise let me know in the comments if you could fix and if this series of videos was useful to you. See you in any future video. Bye bye.
