Answered

Too much screen height when building a phone app

(2) Share

Report

Posted on by LM-12082027-0

Hi,

I am building a phone app that will have different sized content on each page, but the content will be the same (several flex height containers based on a yes/no/n/a response). Each screen will have the same header and footer. The probelm I'm having is my first screen is different and no matter what I try to do with my screen size settings and container settings, I am left with a lot of extra space between the last component on the screen and the footer.

This is the first screen, and when I view it with the weblink:

This is how it looks when I click the preview/play:

Right now, I have each of the sections at a fixed height. This is my tree view for the first screen.

My screen dimensions are (and I got this from a Microsoft Learn page so I'm not sure how it quite works)

Width:

 Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
 

Height:

Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
 
My ctRoot is 
Height: parent.height
Width: 
Min(Parent.Width, 600)
 
My ctScrollMain is: 
Height: Parent.Height - ctLogoTitle.Height - ctNavButtons.Height
 
and I still get this when I look at the webview.  
 
Any suggestions? Any other information that woudl be helpful to see? I'm very confused :-(  Thank you so much!

Categories:

Building Power Apps

General topics

I have the same question (0)

All responses (4)

Answers (3)

Sort by

Verified answer

wolenberg_ 1,476 Super User 2026 Season 1 on at

Like (2)

Report
Copy link

Link copied!
Hi ,

The extra space you’re seeing between your last component and the footer usually comes from how the scrollable container (ctScrollMain) is sized relative to the screen and its children. Right now, you’ve set fixed heights for each section, so the container is always reserving more vertical space than the actual content needs. That mismatch shows up differently in preview/play mode versus the web link, because the rendering engine handles scroll height differently.

The formulas you’re using for App.Width and App.Height are meant for responsive design, but they can introduce unexpected behavior. If you don’t need cross‑device scaling, try simplifying:

Width = App.Width Height = App.Height

Then constrain your root container (ctRoot) with Min(Parent.Width, 600) for consistent sizing.

Practical fix

Replace fixed heights with AutoHeight where possible.

Wrap your content in a vertical container so spacing collapses naturally.

Anchor the footer to the bottom of the screen instead of relying on scroll container math.

This way, the footer will always sit flush at the bottom, and you won’t see that extra blank space in web view.

✨ If my response helped resolve your issue, please mark it as ✅ Accepted Answer and give it a ❤️ like — it helps others in the community find solutions faster. Thank you!

Was this reply helpful? Yes No
LM-12082027-0 28 on at

Like (2)

Report
Copy link

Link copied!

Thank you so much!! One question - how would I anchor the footer to the bottom of the screen? I didn't know I could do that :-) Thank you in advance!

Lisa

Was this reply helpful? Yes No
Verified answer

wolenberg_ 1,476 Super User 2026 Season 1 on at

Like (2)

Report
Copy link

Link copied!
Great question, Lisa! Anchoring a footer to the bottom of the screen in Power Apps is actually straightforward once you know the trick. Instead of trying to calculate its position relative to other containers, you can simply set its Y property so it always sits at the bottom of the parent screen or container.

Here’s how you can do it:

- Footer Height:

Let’s say your footer has a fixed height (e.g., 60).

- Footer Y property:

Parent.Height - Self.Height

This means: take the total height of the parent (the screen or root container) and subtract the footer’s own height. The footer will then always align flush with the bottom edge.

- Footer Width:
Parent.Width

This ensures it stretches across the full width of the screen.

- Footer X property:
0
Keeps it anchored to the left edge.

Example
If your footer control is named `ctFooter`, set:
- `X = 0`
- `Y = Parent.Height - ctFooter.Height`
- `Width = Parent.Width`
- `Height = 60` (or whatever fixed height you want)

Now, no matter how much content is above, the footer will always stay pinned to the bottom of the screen.

This approach works whether your content is scrollable or not. If you’re using a scrollable container, the footer remains fixed at the bottom while the content scrolls independently.

✨ If my response helped resolve your issue, please mark it as ✅ Accepted Answer and give it a ❤️ like — it helps others in the community find solutions faster. Thank you!

Was this reply helpful? Yes No
Verified answer

11manish 2,293 on at

Like (2)

Report
Copy link

Link copied!

The issue you are facing is common when building responsive apps for the web. The "extra space" occurs because your Screen and Root container are stretching to fill the entire browser window (the Web Player), while your internal components have fixed heights or simple subtraction logic that doesn't account for how browsers render the canvas.

The Microsoft Learn formula you used is intended to make an app responsive, but it can cause "floating" content if the container alignment isn't locked down.

Was this reply helpful? Yes No