Add Responsive Design to your Power Apps | Make existing Canvas Apps Responsive

[@dougydoe]

Another great piece! I guess you did hit the nail right on the head; it involves a lot of work, getting use to manipulating containers and their properties to get exactly what you want; a bit similar to apply CSS to elements on a web page when starting out. Really applaud your efforts in helping the community. Thank you.

[@RezaDorrani]

Glad to hear the video is useful. Goal was to put the main point across which was "It involves work to make responsive Apps"

[@brendan1516]

"&hidenavbar=true" to take it to the next level. Users show up not even realizing they are in a PowerApp, plus more real estate :)

[@RezaDorrani]

+1

[@KozlowskiFamily]

The structure in how you put this together helps so much. Thanks for putting this together!

[@RezaDorrani]

Thank Erik.

[@saeedsm57]

Hey Reza, this step by step tutorial is one of the best I have ever watched! Thanks for taking time preparing this kind of valuable learning materials!

[@RezaDorrani]

So happy to hear that. Thank You for watching and liking the video.

[@FarhanKhan-lr4tv]

You are making this platform to another level. Such a helpfull and we learn new in every video. Thanks 👍

[@RezaDorrani]

Glad to hear that! Thanks Farhan.

[@roobaselvendiran]

Awesome Reza, thanks for the video. We are learning lot everyday from you 👍

[@RezaDorrani]

Happy to hear that! Thanks for watching and liking my videos.

[@fesa7978]

Thank you Reza for this great tutorial. It's really help me a lot in my new project. 😊👍

[@RezaDorrani]

You're most welcome 😊

[@munisamy8770]

Thank you so much Reza, for me your videos are Responsive to build PowerApps.

[@RezaDorrani]

Thank You 😊

[@spen2431]

🤯🤯 As always a TOP video. Nice work Reza. 👍👍

[@RezaDorrani]

Thanks again!

[@al-omdaahmed3191]

King of Power platform

[@RezaDorrani]

Thanks so much but content is King!

[@jeffzelf]

Much appreciated Rezza, this is super clear!

[@RezaDorrani]

Most welcome

[@TheD3dicateDGamerS]

This is gold thank you!

[@RezaDorrani]

You're very welcome!

[@god_hacker581]

Thanks Reza!!!. Very nice video as usual. Like to watch and implement your videos.

[@RezaDorrani]

Thanks Bharti

[@derekj500]

thank you. very well explained

[@RezaDorrani]

Glad it was helpful!

[@billkuhn9886]

Like your earlier video on responsive apps, this is a very good video. Great design expertise and very good explanations!

[@RezaDorrani]

Thank you very much!

[@gneto.r]

Excellent content. I'm just starting with power apps but I had this concern about making everything responsive from the start and this video made everything clear. I mean... at least now I have an idea about it, to really learn I need to put it into practice first. This looks like how we deal with html+css and I wonder if future updates gonna change how it works because honestly it's kinda complex for the 'average user' (the so called 'citizen programmer') and I remember some easier ways to deal with this in other platforms where you can create low-code websites.

[@RezaDorrani]

LOW CODE NO CODE

[@satyawannishadms-powerplat6938]

Very helpful video it is , and it came exactly when i am needed this. Thank you sir

[@RezaDorrani]

You are most welcome

[@tvenkatesh81]

Reza you attire on formals too responsive !!!! ❤️

[@RezaDorrani]

:)

[@bobbyw1074]

Thanks Reza this was extremely helpful!

[@RezaDorrani]

Glad to hear!

[@SachinPatil-bz3ku]

Thanks a lot for this wonderful video that’s really help

[@RezaDorrani]

Glad it was helpful!

[@binhbui8776]

Thank you for the video. Nice job!

[@RezaDorrani]

Thanks for watching and liking the video

[@dgarg2149]

Thanks for sharing this useful information 👍

[@RezaDorrani]

My pleasure

[@cristobalandrescerongaldam6186]

Excelent video. Just one question.. How do you make the font size responsive?...

[@RezaDorrani]

powerusers.microsoft.com/t5/Building-Power-Apps/Responsive-Layout-and-Fonts/td-p/501097

[@masgitz]

Very strong content. Thank you.

[@RezaDorrani]

You're very welcome

[@jerriciakambonde3123]

Great tutorial, thanks. How can this be applied to a scrollable screen?

[@RezaDorrani]

I don't think scrollable screen templates are supported with this. I will recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.

[@saifkazi8504]

Thankyou for sharing the information it helps us alot 👍❤️

[@RezaDorrani]

Thanks for watching

[@ndcapper]

Excellent video

[@RezaDorrani]

Thanks

[@KalaiVani-nq2qc]

Hi Reza it's a very useful video which I'm looking for.. I have a scenario where in the header section I need to add the hamburger menu.. How do I achieve this for making the menu responsive? Thanks in advance.

[@RezaDorrani]

Make your header a responsive component and add it into the header container. I do not have a reference video on this scenario & would have to try it out to provide guidance. I would recommend posting your query on the forums at powerusers.microsoft.com

[@365cloudhouse7]

Thanks for this update video Reza, good video. The tip about working with the minus screen is worth its weight in gold. (If you change the display settings then all objects have their parent.width and height set back to a fixed value and everything is messed up) What I still don't get is: An app designed for a desktop 1920 * 1080 is not responsive on a tablet with a resolution of 2500 * 1600! I thought a pixel is a pixel regardless of the divice. Do you have any idea how this is possible? So I'm still working with 2 apps, 1 for desktop and 1 for the tablet, but that's not nice, also because of the extra license costs. 👍

[@RezaDorrani]

Thanks. Not sure about your 1920 * 1080 is not responsive on a tablet issue. I will recommend checking on the forums at powerusers.microsoft.com/ in case someone has done something similar.

[@SmartLearningAI]

Hi Reza, this is very interesting, thank you for sharing. I have made a model-driven app and a canvas app for the same data table and both work fine, but on the model-driven app, when testing on my ipad (although by design as you said, it is automatically responsive, I noticed the font sizes are too small for me to read the text, wo what is the recommendation for mobile model driven apps to set the text font sizes a bit larger? while remaining fully responsive? Also the top header is dark blue be default in the mobile model-driven app...where can I change that?) Thanks.

[@RezaDorrani]

Most welcome! I have no idea if there is an option to change font sizes for MDA. I would recommend checking on forums in case someone has done something similar

[@jbo1253]

Thank you for the great video. I am having trouble pasting a Data Table into a container. Is that possible?

[@RezaDorrani]

I believe Yes. You will need to add some control in container (example: label). Then try copy and paste datatable onto the label and see if it works.

[@powermykola]

Great video, but any ideas for a dynamic font for the app? especially necessary when developing an application for a browser / tablet, but sometimes for a small group of users you need to use the application on a smartphone

[@RezaDorrani]

Check powerusers.microsoft.com/t5/Building-Power-Apps/Responsive-Layout-and-Fonts/td-p/501097 The formula used is to calculate font size based on screen size. You can store that info on load of App.

[@philglew-deval]

Great video Reza.

[@RezaDorrani]

Thanks

[@vaibhavwarkar9629]

Thank you sir for your great videos

[@RezaDorrani]

Your most welcome

[@walesbe1028]

Hi Reza. Another fantastic video as usual. You convinced me., my next app will be responsive for sure. I have one question for you. Your app in the browser uses all the width of the screen, whereas in my apps there are always two vertical column each side of my apps. Is it because they are not responsive ? Or is there a way to use full width on different screen sizes without using responsive containers ?

[@RezaDorrani]

Probably because in the App settings, the scale to fit option is not turned off. It's my guess. I have done multiple videos on responsive design. Check my playlist kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@babukurapati5611]

Thank you for your time sir

[@RezaDorrani]

You are most welcome!

[@zerokhan858]

thank you so much

[@RezaDorrani]

You're welcome!

[@shashikanthduddukuri6228]

Thanks for the great video.

[@RezaDorrani]

Glad you liked it!

[@oluwatobiyusuf]

Thank you Reza. This is really helpful

[@RezaDorrani]

Your most welcome

[@mariuskaizerman]

Thanks Reza for a great tutorial. I tried to implement this on the first page of the auto generated 3 screens app (the scrolling records), after adding a container for the header record and configured it for "responsive design) the records stopped scrolling. Do you have maybe a tutorial for this kind of screen? Thanks.

[@RezaDorrani]

I have done multiple videos on responsive design. Maybe I showed that :) Check kzbin.info/aero/PLTyFh-qDKAiHe6pHdlyBbRK1b44bNAAN_

[@merk252]

@Reza Dorrani, Great tutorial! Is it possible to do this for a icon with a button that is separated?

[@RezaDorrani]

I dont think overlays are possible with these

[@glennbullion9069]

This guide took me very far in making my simple app responsive. Quick question. Is there a way to have some like of "max" width? My problem now is the opposite of when started. App looks good on mobile, but very "wide" on a regular monitor. Taking up the entire space on monitor hurts the eyes :)

[@RezaDorrani]

Im sure there are ways to do that using App width , max width and min width properties. I will recommend checking on forums at powerusers.microsoft.com in case someone has a solution for this.

[@MohammadAli-ts2ev]

A Great video...it's, indeed, very informative.. @Reza -. Can you plz make a video on the issue we experience while picking up DATE to edit form from Excel online (for business). The date picker simply goes blank and it doesn't pick up date from Excel table (date column) while other details from the table appear correctly. Any get around will help many of the people. I got the same issue posted by someone on powerplatform community but none of the answers fixed the issue..

[@RezaDorrani]

I have a video planned with excel & power automate to load data into SharePoint. I will definitely include the Date column type.

[@douglashill1759]

kind of a big request, but could you do a tutorial on how you would take an existing infopath form that is attached to a SP site and make it into a power app?

[@RezaDorrani]

There is no direct way to migrate InfoPath to Power Apps. I will add this request to my backlog but will need a lot more folks requesting this topic to give it a higher priority. Meanwhile, I will recommend checking the forums at powerusers.microsoft.com/ in case someone has done something similar.

[@douglashill1759]

@@RezaDorrani thank you for responding, I am very aware there isn't a direct way to migrate, but I guess I wanted to see an example of how you would approach it.

[@RezaDorrani]

@@douglashill1759 Can you send me a sample infopath form at [e-mail]. An easy one :)

[@priscaonyebuchi7403]

Hi Reza! Quick question: What software do you use to edit your videos? I think you do a great job at that

[@RezaDorrani]

I use Camtasia

[@lks5343]

Thankyou Sir

[@RezaDorrani]

Most welcome

[@alexandrecarriqui]

Thanks you for this 1/3 vidéo.

[@RezaDorrani]

Thanks for watching

[@charlygeorges6852]

Nice one ! Good job :)

[@RezaDorrani]

Thank you! Cheers!

[@bin123singh]

Hello sir, I have seen your almost all videos. I would like to appreciate your effort. But, in all articles I did not find how to make responsive a form which contains 6 textboxes, 3 dropdowns, 2 radio button and 2 combo box. We are facing lot of issue while creating responsive design using these controls. I would request you to please create a video using these controls which will be purely responsive for Mobile, Tablet. And request you to please don't use Gallery control in that video. It should be simply New/Edit form but it should be responsive.

[@RezaDorrani]

Have you seen every video of mine in my responsive design playlist?

[@julijazas]

Could you make a video step by step on how to create a responsive horizontal gallery with gallery responsive column names. it should look like table but instead of table control there should be a gallery control

[@RezaDorrani]

I will add this request to my backlog but will need a lot more folks requesting this topic to give it a higher priority. I did a few videos on grid like galleries. Check kzbin.info/www/bejne/rXqZhHt9hp50isk

[@therisingsun4828]

So if you select the phone form factor, you don't have to worry about these responsive techniques? Or should you still implement the same techniques as a best practice?

[@RezaDorrani]

You would still need to take these techniques into consideration. Canvas Power Apps are not responsive by design.

[@hanishvaitla]

Hey Reza, I am building a form, but i need it to be fixed size at first, but later if the window is minimized to a size less than the form, then the form must be responsive.. Any suggestion on how to do this ?

[@RezaDorrani]

Check my playlist on responsive design. I have done multiple videos on responsive forms.

[@tvenkatesh81]

Hey Raza, i want to add footer also with 4 button controls. i have added one more horizontal container to place the buttons. however i could align buttons properly and the bottom container is taking more space on screen with other container. How do i do this... i am not able to crack that.

[@RezaDorrani]

Check my recent videos on forms and more. I have added containers with buttons.

[@Itsprincessa01]

Hi Reza, how do i move a vertical container within the main header to the bottom, like make it a footer container

[@RezaDorrani]

I cannot explain it here on chat + I would need to try it out myself to know how. I would recommend posting your query with screenshots on the forums at powerusers.microsoft.com

[@aishwaryabanerjee4608]

Can you please explain how did you create the space between two button in Delete screen for responsive layout?

[@RezaDorrani]

Container has a property called "Gap". Use that to create space between controls.

[@rubikarubi441]

Hello Mr. Reza Dorrani, I have a question🙋 I have a SQL table with Tx_number column but the data type is string, When I try to sort the colum using delegation sort method it gets sorted like string formate. But I need it get sort interger format. e.x. Tx_number - 10,20,100,105,200,222,1302. Expected - 10,20,100,105,200,222,1302. What really I got : 10,100,105,1302,20,200 , 222. Could you please help me to resolve this issue.

[@RezaDorrani]

You can use the Value function to convert string to Value.

[@mardithpascua8112]

Hi Reza, is there a way also to add responsiveness for textbox set to Multiline property? Thank you

[@RezaDorrani]

Not sure about that one. Something for me to try out. I will recommend checking on forums in case someone has a solution. powerusers.microsoft.com

[@rathikavenkatesh2510]

Hi after implementing auto responsive the screen loading very slow. We could see the control loading one by one. Any suggestions

[@RezaDorrani]

I will have to look at your App in action to know the reason for your app performance being affected. I would posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@2007pradipta]

How to over lap Icon inside Vertical container ? both always come side by side .😒..I want to design A TickMark with outside Circle. And when I tried to Delete any control from the Container it shows lots of error.

[@RezaDorrani]

I dont think overlap is a feature with containers. You would have to make it (control) sit outside the container and then overlap.

[@gopalakrishnanramamoorthy187]

Thank you for your Best input. To Understand better and to give rich experience to the user ,Amount of time Consumed to make One Responsive Design App, We can Make One Desktop App, One Mobile App ,Correct me if i am Wrong . Pls Guide us if we make different app for different Plantform with same Datasource . Will it be Proper. Idea is Atleast In One application Either in Mobile or in Desktop we should give rich user experience. Any Coding on AppStart will help . Can you give us the Video

[@RezaDorrani]

The whole reason for creating responsive Apps is so you do not have to create multiple Apps. Biggest issue with multiple Apps is that if a change is needed or a new feature needs to be incorporated it would have to be built in all those Apps.

[@gopalakrishnanramamoorthy187]

@@RezaDorrani Understand Sir

[@Zodiac65ForU]

I want to build a full year by month view in Canvas to align events for the year by sponsor with months on the Y axis and the data fields on the X

[@RezaDorrani]

I do not have a video reference on this scenario. You can try it out and follow the responsive design techniques showcased in video. I will also recommend checking on forums at powerusers.microsoft.com in case someone has done something similar

[@-KNaveenkumar]

When I am trying to on flexible width for the 3 containers it's not coming to the exact place could u please help me

[@RezaDorrani]

I have not come across this issue & helping here on chat is difficult. I recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@krishnaaveersinghhada9220]

Hi Reza, I have created the canvas app and connected to SharePoint. But when I am entering the data in App to automatically update the record in SharePoint, that integration is not working for me. I have watched your video today and commented on that as well, if you can see that comment, please assist.

[@RezaDorrani]

I will have to look at your App in action to provide guidance. I would recommend posting your issue/query with screenshots on the forums at powerusers.microsoft.com

[@doointhedoo]

what about canvas apps that do no have containers? can you convert those?

[@RezaDorrani]

All Canvas Apps have containers once you enable the setting as shown in video for responsive design.

[@nilams1914]

I have bulk of pdf invoices, is it possible convert in excel, using canvas

[@RezaDorrani]

Question has no correlation to video :) I have no idea about the scenario you mentioned. I recommend posting your query on forums at powerusers.microsoft.com

[@haritkamboj2952]

Hi Reza, Have you come across when going with disabling scale to fit, in edit screen height portion where we place controls is much larger and bottom controls do appear in play mode as it cuts off. Plz advice.

[@RezaDorrani]

I have not come across the mentioned issue and hence not sure what the reason for your issue is. I recommend posting your issue with screenshots on the forums at powerusers.microsoft.com

[@haritkamboj2952]

Ok no worries, thanks for quick reply. You are doing a great service. 😎

[@satyawannishadms-powerplat6938]

Is there any disadvantages of using large number of containers in one page?

[@RezaDorrani]

You can use as many containers as needed.

[@satyawannishadms-powerplat6938]

@@RezaDorrani thank you so much

[@agustianaperdana2793]

PLZ TABLE?

[@RezaDorrani]

?