{"id":2014,"date":"2019-03-18T15:09:22","date_gmt":"2019-03-18T22:09:22","guid":{"rendered":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/craft-app-height-and-width-expressions-to-create-responsive-canvas-apps\/"},"modified":"2025-06-11T08:04:51","modified_gmt":"2025-06-11T15:04:51","slug":"craft-app-height-and-width-expressions-to-create-responsive-canvas-apps","status":"publish","type":"post","link":"https:\/\/www.microsoft.com\/en-us\/power-platform\/blog\/power-apps\/craft-app-height-and-width-expressions-to-create-responsive-canvas-apps\/","title":{"rendered":"Craft App Height and Width expressions to create responsive canvas apps"},"content":{"rendered":"

If you\u2019ve built canvas apps using PowerApps, you\u2019ve noticed that one of the first decisions you need to make is whether you want a layout that is tailored for a phone or for a tablet. This choice will determine the size and shape of the canvas you will work with while building your app.<\/p>\n

If your app is used on a device of a different size (or on the web), your entire layout is scaled larger (or smaller) to fit the screen where it is running. If an app designed for a phone is run in a large web browser window, for example, it appears almost comically oversized for its space. It can\u2019t take advantage of all those additional pixels, by showing more controls or more content.<\/p>\n

With this new update, experienced app makers can now transform apps into a responsive experience through some work with expressions. You must write formulas that adapt the size and position of controls based on the size of the screen at runtime which is now able to be referenced in the app. You\u2019ll be able to adapt the layout of each of your screens to the actual space in which they are running. As a result, screens show more information with more appropriate font sizes, all making for a better app experience.<\/p>\n

\"\"<\/p>\n

Turn off Scale to Fit<\/h2>\n

As responsiveness is not yet the default for canvas apps, you will need to disable the current default fixed size behavior.<\/p>\n

Navigate to App settings > Screen size and orientation, then\u00a0 turn the Scale to Fit toggle to “Off”.<\/p>\n

\"Disable<\/p>\n

To learn more about these options, refer to the\u00a0size and orientation settings in our documentation.<\/a><\/p>\n

Writing expressions with App Width and Height<\/h2>\n

Now this announcement is to say that creating responsive apps is possible, unfortunately, not that it is easy. You can now use App.Width and App.Height which return the app’s current width and height. This means you can use expressions to accomplish position and sizing based off of their values.<\/p>\n

For a simple example: let’s look at a rectangle that can make a header on an app.\u00a0When the app grows or shrinks, we want the width of the rectangle to fill the screen, but the height to remain the same.<\/p>\n

\/\/Rectangle Header properties\nRectangle1.Width = Parent.Width<\/strong>\nRectangle1.Height = 88<\/strong><\/pre>\n
We can see how the rectangle width is the same as the screen, which takes the full space of the app window.<\/p>\n
\"\"<\/p>\n
Some best practices and examples on how to write expressions for different responsive behavior can be found in our\u00a0documentation on creating responsive layout.\u00a0<\/a><\/p>\n
There are still quite a few known limitations that we will be working to lift in the coming while. Most notably:<\/p>\n