You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: powerapps-docs/maker/canvas-apps/build-responsive-apps.md
+71-10Lines changed: 71 additions & 10 deletions
Original file line number
Diff line number
Diff line change
@@ -62,13 +62,15 @@ Before you start using the responsive layouts, you need to do the following:
62
62
1. Open the app where you want to use the responsive layout.
63
63
1. Go to **File** > **Settings** > **Screen size & orientation** to disable **Scale to fit**, **Lock aspect ratio**, and **Lock orientation** and select **Apply**.
@@ -78,7 +80,16 @@ The Split-screen layout has two sections, each occupying 50% width of the screen
78
80
79
81
The Sidebar layout has a fixed width sidebar on the left. The main body consists of a fixed height header, and the main section takes up the rest of the screen width. By default, the template has the same behavior on mobile, however some customizations are recommended based on the UI pattern desired for the mobile experience.
80
82
81
-
### Working with containers
83
+
### Example
84
+
85
+
1. Sign in to [Power Apps](https://make.powerapps.com).
86
+
1. Select **Apps** from left navigation. Select the **New app** drop down menu and then select **Canvas**.
87
+
1. On the **Blank app** tile, select **Tablet layout**.
88
+
1. Select **File** > **Settings** > **Screen size + orientation** and disable **Scale to fit**, **Lock aspect ratio**, and **Lock orientation** and select **Apply**.
89
+
1. Select **New screen** and then select **Header, footer, main content** template screen.
90
+
1. Select **MainSectionContainer1** and set the `Direction` property to `Horizontal`. Set `Align` to `Stretch`.
91
+
92
+
## Working with containers
82
93
83
94
Containers are building blocks of all the responsive design. A container can be an [auto-layout container](#auto-layout-containers) in vertical or horizontal direction, or a fixed-layout container, which in the future will support constraints.
84
95
@@ -92,27 +103,77 @@ Below are some tips for building your app’s UI with containers:
92
103
93
104
Choose one of two layout modes for a container: Manual layout or auto-layout (Horizontal or Vertical)
94
105
95
-
###Auto-layout containers
106
+
## Auto-layout containers
96
107
97
108
Two controls, [Horizontal container](controls/control-horizontal-container.md) and [Vertical container](controls/control-vertical-container.md) can be used to automatically lay out the child components. These containers determine the position of the child components so that you never have to set X, Y for a component inside the container. Also, it can distribute the available space to its child components based on the settings, as well as determines both the vertical and horizontal alignment of the child components.
98
109
99
-
####When to use auto-layout containers
110
+
### When to use auto-layout containers
100
111
101
112
You can use auto-layout containers in the following scenarios:
102
113
103
114
- UI needs to be responsive to screen size or form factor changes.
104
-
105
115
- There is more than one child component that needs to resize or move around based on the screen size or form factor changes.
106
-
107
116
- When you need to stack items vertically or horizontally (regardless of their size).
108
-
109
117
- When you need to space items evenly on the screen.
110
118
119
+
### Example for auto-layout container
120
+
121
+
To build a responsive screen:
122
+
123
+
1. Sign in to [Power Apps](https://make.powerapps.com).
124
+
1. Select **Apps** from left navigation. Select the **New app** drop down menu and then select **Canvas**.
125
+
1. On the **Blank app** tile, select **Tablet layout**.
126
+
1. Select **File** > **Settings** > **Screen size + orientation** and disable **Scale to fit**, **Lock aspect ratio**, and **Lock orientation** and select **Apply**.
127
+
1. Now from the **Insert** pane in the left sidebar, under **Layout**, select **Horizontal container**.
1. To divide the screen between the content, use the `Fill portions` property on the two child containers. The left container will take up 1/4 of the screen space.
149
+
1. Select **Container2**. You'll see that the `Flexible width` property is turned on. Set the `Fill portions` to 1.
150
+
1. Select **Container3**. You'll see that the `Flexible width` property is turned on. Set the `Fill portions` to 3.
151
+
1. Select **Container2**. Set the `Fill = RGBA(56, 96, 178, 1)` property in the formula bar. Set `Align (horizontal)` to `Stretch`.
152
+
1. Add few buttons to create a menu. Rename the buttons as needed.
1. Select **Container3** and add a Horizontal container and turn off the `Flexible height` property. Set `Height` to 100. Set `Align (vertical)` to `Stretch`.
158
+
1. Add some **Icons** into **Container4**. Change the icons to be different with the icon property.
1. Select **Container4**. Set the `Justify (horizontal)` property to `End`. Set the `Align (vertical)` to `Center`. Set `Gap` to 40 to create space between the icons.
164
+
1. Select **Container3**. Set `Align (horizontal)` to `Stretch`. Set `Vertical Overflow` to `Scroll`.
165
+
1. Add different **Label**, **Inputs**, **Media** until they extend beyond the container. Change the color of the rectangles to be different. You'll see a scroll bar to access the unseen content.
166
+
167
+
> [!div class="mx-imgBorder"]
168
+
> ![Add different inputs](media/create-responsive-layout/add-different-inputs-media-icons.png"Add different inputs")
169
+
170
+
1. Select Preview or F5. Change the size of the browser window to see how your app adjusts to different screen sizes.
171
+
111
172
## Known issues
112
173
113
174
- Certain combinations of layout container properties are incompatible or can produce undesirable outputs, for example:
114
-
- If the container’s `LayoutWrap` property is enabled, the `AlignInContainer` property setting is ignored on child controls.
115
-
- If the container’s `LayoutWrap` property is disabled and the container’s primary-axis overflow is set to **Scroll** (Horizontal Overflow for Horizontal containers or Vertical Overflow for Vertical containers), it is recommended to set the `LayoutJustify` property to either **Start** or **Space Between**.
175
+
- If the container’s `Wrap` property is enabled, the `Align` property setting is ignored on child controls.
176
+
- If the container’s `Wrap` property is disabled and the container’s primary-axis overflow is set to **Scroll** (Horizontal Overflow for Horizontal containers or Vertical Overflow for Vertical containers), it is recommended to set the `Justify` property to either **Start** or **Space Between**.
116
177
- The **Center** or **End** options can cause child controls inaccessible when the container is too small to display all the controls, even though the `Overflow` property is set to **Scroll**.
117
178
118
179
- You can’t resize or reposition the controls on the canvas app because the drag & drop controls are disabled in the layout containers. Instead, use the layout container properties to achieve the desired size and positioning. Control ordering can be changed via the **Tree view**, or by using the arrow keys as shortcuts.
0 commit comments