expand screen ,adjusting the size and layout of your app's screens

(0) Share

Report

Posted on by Hanan-khamissy

140

How can I adjust the size and layout of the app's screens?

i have a lot of non usable space in the screen and my app screen is too small

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (2)

Verified answer

cchannon 4,702 Moderator on at

Like (0)

Report

Set your browser display to Window Size instead of Canvas Size:

Was this reply helpful? Yes No
Verified answer

LEGRANCHE on at

Like (0)

Report
You can implement a responsive layout starting with adjusting the "Scale to fit" setting and then moving on to manage control rendering based on screen size or device by setting relative positions and sizes:

Disable "Scale to Fit": First, navigate to the App Settings, select Display, and then turn off the "Scale to fit" toggle. This step ensures that the app layout adjusts dynamically to the screen size instead of scaling up or down to fit the screen, which is crucial for a responsive design.
Set Controls Relatively: Use the X and Y properties to position controls on the screen relative to each other or their parent container. This relative positioning helps in maintaining the layout structure across different screen sizes.
Dynamic Width and Height: You can also set the Width and Height properties of controls to adjust proportionally to the screen size. By defining these properties relative to the screen or parent container dimensions, controls can resize dynamically, enhancing the app's responsiveness.
For example, to center a button and make its size responsive:
X Position: (Parent.Width-Self.Width)/2 positions the button in the center horizontally by calculating the midpoint of the parent container and adjusting for the button's width.
Y Position: (Parent.Height-Self.Height)/2 centers the button vertically in a similar manner.
Width and Height: Setting these to Parent.Width/4 and Parent.Height/4, respectively, makes the button's size responsive, adjusting to a quarter of the parent container's size.
Key to Responsiveness: The essence of creating a responsive design is to define the position (X, Y) and size (Width, Height) of controls relative to other controls or their parent containers. Utilizing the Parent and Self keywords allows for referencing the control itself or its container, making your layout adapt smoothly to different screen sizes.

Was this reply helpful? Yes No
Hanan-khamissy 140 on at

Like (0)

Report

i don't have this option
the browser button not working

Was this reply helpful? Yes No
LEGRANCHE on at

Like (0)

Report

Hi @Hanan-khamissy ,

You need to disable the "Scale to fit" setting first

Was this reply helpful? Yes No