{"id":1757,"date":"2018-06-26T16:14:45","date_gmt":"2018-06-26T20:14:45","guid":{"rendered":"https:\/\/toddbaginski.com\/blog\/?p=1757"},"modified":"2018-06-26T16:14:45","modified_gmt":"2018-06-26T20:14:45","slug":"how-to-make-powerapps-fill-the-entire-screen","status":"publish","type":"post","link":"https:\/\/toddbaginski.com\/blog\/how-to-make-powerapps-fill-the-entire-screen\/","title":{"rendered":"HOW TO: Make PowerApps Fill The Entire Screen"},"content":{"rendered":"

Ever since the Onboarding Tasks and Meeting Capture<\/a> PowerApps sample templates were released people have asked me, ‘How did you get the PowerApps to fill the entire web browser and look good?’.<\/p>\n

It’s actually quite simple.\u00a0 \ud83d\ude42<\/p>\n

Let’s use the Meeting Capture PowerApps sample template as an example.<\/p>\n

When you download the Meeting Capture PowerApps sample template, you will notice it fills the entire web browser, like this:<\/p>\n

\"\"<\/p>\n

To enable this behavior, go to App Settings<\/strong> in the PowerApps editor, then select Screen size + orientation<\/strong>.\u00a0 Then, in the Advanced settings<\/strong> section, turn Off Lock aspect ratio<\/strong>.\u00a0 Just like this:<\/p>\n

\"\"<\/p>\n

If you turn On Lock aspect ratio<\/strong>, the Meeting Capture PowerApps sample template will look like this.<\/p>\n

\"\"<\/p>\n

You can learn more about the screen size and orientation settings here<\/a>.<\/p>\n

One thing you need to be careful about when you turn Off Lock aspect ratio<\/strong> is how you position your controls. Absolute positioning for all of your controls will not work well.\u00a0 Instead, you will need to use relative positioning for your controls to ensure they stretch and move well to fill the entire web browser without overlapping each other, or looking all wonky.<\/p>\n

Here is an example (shown below) that demonstrates how you can set a relative position for controls in PowerApps.\u00a0 In this example, the Y coordinate is 20 pixels more than the bottom of the control that appears above it in the screen.<\/p>\n

\"\"<\/p>\n

Be careful how you edit!\u00a0<\/strong> <\/em>If you move controls on the design surface with your mouse or arrow keys any code you wrote to relatively position them will disappear and the X and Y coordinates will become fixed.<\/p>\n","protected":false},"excerpt":{"rendered":"

Ever since the Onboarding Tasks and Meeting Capture PowerApps sample templates were released people have asked me, ‘How did you get the PowerApps to fill the [\u2026]<\/span><\/p>\n","protected":false},"author":1,"featured_media":1765,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[96,104,121],"tags":[122,54,57,45,112],"class_list":["post-1757","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-office-365","category-powerapps","tag-how-to-powerapps","tag-mobile","tag-mobility","tag-o365","tag-powerapps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1757","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/comments?post=1757"}],"version-history":[{"count":3,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1757\/revisions"}],"predecessor-version":[{"id":1764,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/posts\/1757\/revisions\/1764"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media\/1765"}],"wp:attachment":[{"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/media?parent=1757"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/categories?post=1757"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/toddbaginski.com\/blog\/wp-json\/wp\/v2\/tags?post=1757"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}