Layout in a responsive App

(0) Share

Report

Posted on by FB-10121203-0

Hello,

I've been blocking on a problem for a few hours now: I'm trying to create a responsive App, something classic, with a header, a side navbar and the content, the idea being that in the phone configuration, my navbar goes to the bottom of the phone (and stay there even if the content is scrollable), the header stay on top, and the content is (scrollable) in the center. But, I have a problem with the space where my page content should be. On the screenshot you can see the structure of my screen with my header component and my navbar component. I colored my Cont_Principal (which contain everything on the screen) in blue and my Cont_Page (where the content of the page will be) in orange. When I'm in PC view I can see the orange, but when I switch in mobile view, I'm seing blue, so I won't be able to see the content of my page on a phone.

Here are the properties of Cont_Principal:

Properties:
            DropShadow: =DropShadow.None
            Fill: =RGBA(153, 201, 238, 1)
            Height: =Parent.Height
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Vertical
            LayoutWrap: =true
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
            Width: =Parent.Width
And here are propertis for Cont_ContenuPrincipal:
Properties:
                  AlignInContainer: =AlignInContainer.SetByContainer
                  BorderStyle: =BorderStyle.None
                  DropShadow: =DropShadow.None
                  Height: =App.Height-Cont_Principal.Height
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutMaxHeight: =0
                  LayoutMaxWidth: =0
                  LayoutMinHeight: =1
                  LayoutMinWidth: =16
                  LayoutOverflowY: =LayoutOverflow.Scroll
                  Width: =Parent.Width
And lastly for Cont_Page:
Properties:
                        AlignInContainer: =AlignInContainer.SetByContainer
                        BorderStyle: =BorderStyle.None
                        DropShadow: =DropShadow.None
                        Fill: =RGBA(246, 88, 16, 1)
                        Height: =Parent.Height
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutMaxHeight: =0
                        LayoutMaxWidth: =Parent.Width
                        LayoutMinHeight: =0
                        LayoutMinWidth: =16
                        LayoutOverflowY: =LayoutOverflow.Scroll.
 
I'm guessing it have something to do with a Layout property and eventually a Height property but I've been trying and trying and I can't find a solution. If anybody see the problem or have a structure already done that can do that I would love to have it because it's making me crazy. 
(I also trie the "already made" screen with the header and the navbar but in a mobile view it doesn't change, the navbar stay on the left so it's not useful to me). Thank you

Categories:

Building Power Apps

I have the same question (0)

All responses (2)

Answers (0)

Suggested answer

MMcCloud 393 Moderator on at

Like (0)

Report
Copy link

Link copied!

Good Morning,

I definitely think that the responsive app system is a little over-engineered I reduce the complexity of my apps via this system I can walk you through to make this easier. Let's use your app concepts you want as the base so our goal is:

Header at the top fixed position

Navbar at the bottom in mobile

Scrollable content in the middle

For me I usually start with a new responsive app:

Setup:

Delete all components under ScreenContainer as shown:

Then we are going to put our Header in first I will use a rectangle to represent. We need to not use fixed positions to make this work. The only fixed position you can use is if your component is placed as far left as possible or at the top of the screen is 0 otherwise it will shift.

TOP BAR

So now for the rectangle set

Top left and right

X = 0

Y = 0

Height and Width

Width = ScreenContainer1.Width // this gives you the width of screen

Height = ScreenContainer1.Height *.2 // Gives us 20% of the screens height as a top bar

Side not lets say we want a label in the middle of this then you can do this:

Label

X =

Rectangle1.Width * .5 - Self.Width*.5

Y =

Rectangle1.Height * .5 - Self.Height * .5

This gives you reference from the rectangle so that it stays centered.

Now lets get to the sidebar quickly rectangle example again

Static SideBar

X = 0

Y = ScreenContainer1.Height - Self.Height

Height = ScreenContainer1.Height - Rectangle1.Height // fills the left side of the screen.

This sets it to the left side then you can base your calculations off the rectangle or whatever component you place for objects needed galleries etc.

Dynamic Sidebar / NavBar

Now how do we make this dynamic and move when the screen size changes?

X = 0

Y =

If(App.ActiveScreen.Size = 4, ScreenContainer1.Height-Self.Height, ScreenContainer1.Height-Self.Height) // 4 is desktop else is mobile we are assuming you can change if you have specialty devices

Height =

If(App.ActiveScreen.Size = 4, ScreenContainer1.Height - Rectangle1.Height, ScreenContainer1.Height * .2) // Checks the screen size if its mobile its set to 20% of the screen

Width =

If(App.ActiveScreen.Size = 4, ScreenContainer1.Width * .1, ScreenContainer1.Width)

Center Screen

The middle screen would follow a similar concept of adjusting off the rest I can't really prepare your component but, in concept you can just based it off the same condition and place rectangle for the fix.

Middle Area rectangle:

X =

If(App.ActiveScreen.Size = 4, Rectangle2.Width, 0)

Y =

Rectangle1.Height // Just below the header

Height =

If(App.ActiveScreen.Size = 4, ScreenContainer1.Height - Rectangle1.Height, ScreenContainer1.Height - Rectangle1.Height - Rectangle2.Height)

Width =

If(App.ActiveScreen.Size = 4, ScreenContainer1.Width - Rectangle2.Width, ScreenContainer1.Width) // If its a browser we set it to width minus nav bar else we set it to screen width

This works for me and you should be able to copy it now screenshots to prove

Browser Size:

Tablet Size:

Phone Size:

If this solves your issue, please select it as the solution so that others can reference it.

If you still require help feel free to follow up I would be glad to help.

Was this reply helpful? Yes No
FB-10121203-0 2 on at

Like (0)

Report
Copy link

Link copied!

Thank you for your detailled response. I tried your solution, but for the sidebar I'm not sure I understood where to change those properties, in the rectangle or the ScreenContainer, because I don't get why you give Y a value then change it just after. Plus, in "Y= If(App.ActiveScreen.Size = 4, ScreenContainer1.Height-Self.Height, ScreenContainer1.Height-Self.Height)" those are the same values so I might as well juste write "ScreenContainer1.Height-Self.Height" no ? So I might not have changed the properties at the right element but the side bar rectangle is still at the top of my screen on a mobile screen. As for the Center Screen, it's totally out of the screen on desktop but appear on mobile. Here is my code:

Screens:

Screen1:

Properties:

Fill: =RGBA(255, 255, 255, 1)

LoadingSpinnerColor: =RGBA(0, 120, 212, 1)

Children:

- Container2:

Control: GroupContainer@1.3.0

Variant: AutoLayout

Properties:

Height: =Parent.Height

LayoutDirection: =LayoutDirection.Vertical

Width: =Parent.Width

Children:

- Rectangle1:

Control: Rectangle@2.3.0

Properties:

BorderColor: =RGBA(0, 0, 0, 0)

BorderStyle: =BorderStyle.None

BorderThickness: =2

DisabledFill: =RGBA(161, 159, 157, 1)

Fill: =RGBA(0, 120, 212, 1)

FocusedBorderThickness: =4

Height: =Container2.Height*0.2

HoverFill: =RGBA(0, 120, 212, 1)

LayoutMaxHeight: =0

LayoutMaxWidth: =0

LayoutMinHeight: =16

LayoutMinWidth: =16

PressedFill: =RGBA(0, 120, 212, 1)

Width: =Container2.Width

X: =Rectangle1.Width*0.5-Self.Width*0.5

Y: =(Rectangle1.Height*0.5)-(Self.Height*0.5)

- Rectangle2:

Control: Rectangle@2.3.0

Properties:

BorderColor: =RGBA(0, 0, 0, 0)

BorderStyle: =BorderStyle.None

BorderThickness: =2

DisabledFill: =RGBA(161, 159, 157, 1)

Fill: =RGBA(255, 191, 0, 1)

FocusedBorderThickness: =4

Height: =If(App.ActiveScreen.Size=4,Container2.Height-Rectangle1.Height, Container2.Height*0.2)

HoverFill: =RGBA(0, 120, 212, 1)

LayoutMaxHeight: =0

LayoutMaxWidth: =0

LayoutMinHeight: =16

LayoutMinWidth: =16

PressedFill: =RGBA(0, 120, 212, 1)

Width: =If(App.ActiveScreen.Size=4,Container2.Width*0.1, Container2.Width)

Y: =If(App.ActiveScreen.Size=4, Container2.Height-Self.Height,Container2.Height-Self.Height)

- Rectangle3:

Control: Rectangle@2.3.0

Properties:

BorderColor: =RGBA(0, 0, 0, 0)

BorderStyle: =BorderStyle.None

BorderThickness: =2

DisabledFill: =RGBA(161, 159, 157, 1)

Fill: =RGBA(176, 18, 126, 1)

FocusedBorderThickness: =4

Height: =If(App.ActiveScreen.Size = 4, Container2.Height-Rectangle1.Height,Container2.Height-Rectangle1.Height-Rectangle2.Height)

HoverFill: =RGBA(0, 120, 212, 1)

LayoutMaxHeight: =0

LayoutMaxWidth: =0

LayoutMinHeight: =16

LayoutMinWidth: =16

PressedFill: =RGBA(0, 120, 212, 1)

Width: =If(App.ActiveScreen.Size = 4, Container2.Width-Rectangle2.Width,Container2.Width)

X: =If(App.ActiveScreen.Size = 4, Rectangle2.Width, 0)

Y: =Rectangle1.Height

And here is the result I got:

Was this reply helpful? Yes No