Power Platform Community Forum Thread Details

I'm trying to build a responsive layout using containers.

I have a control (in this case, a Text Label) inside a Container. The Container's Orientation is set to "If(App.Width < 768, LayoutDirection.Vertical,LayoutDirection.Horizontal)"

If I resize the browser viewport (App.Width) from above to below 768px, then the height of the Text Label will change from what I set it to (40) to 150. In the designer, the value still shows as 40, however....

So, the height of the element is changing if I resize the viewport... Is this expected behavior? Why does it do that?

Categories:

Building Power Apps

Hi @oguruma ,

It seems you are using a container incorrectly. You need not set the orientation dynamically.

Just leave it on Horizontal then set the "Wrap" to true. This means that if an item cant fit the current row. It should go to next row.

The last thing you need to do is to make use of the Minimum Width property of its child items.
For example. you have a container and you want to display 2 Labels, you want them stacked side by side if the available width on the current row is 700px or more (350 min-width for each).
If the current viewport is >=700px, they stack side by side since a min of 350 for each can fit. But if the viewport drops to 699px, there is enough space for only one. 350 cant fit in 349 so it would "Wrap" to the next line, hereby creating a vertical display.

In summary, you need not dynamically set Orientation but set "Wrap" to true and focus on the actual child elements dynamically or statically setting its Min-Width and fill-portions