You’re offline. This is a read only version of the page.
234
Throwing this out there in hopes of getting some assistance.
Some of the pages on our portal site are displaying the footer incorrectly. Even though the page view port is tall, something is causing the page window to not flex/grow to fill in the remainder of the window. The footer basically will ride up the page instead of testing at the bottom of the window.
This only seems to be occurring on web pages where there is an entity form configured. If the form is not very long (eg 2 or 3 fields) and it doesn’t fill the page, the footer rides up and rests below where the form ends. Right at the bottom border of the entity form.
I explored the DOM and can see the tree has everything wrapped in a form element. The wrapper-body is being inserted inside the form element.
We’d like the footer to always remain at the bottom of the window unless the content is greater than the viewport height, in which case having it pushed down is fine.
No changes to theme or CSS have been made.
Update to everyone:
I was never satisfied with the "fixed" footer solution. The fixed footer always sits at the bottom of the page.... even if the content goes beyond the footer. It was easy to implement, but it was not really the result that I wanted.
To be clear, a "true" sticky footer will exhibit this behavior:
1. If there is not enough content to fill up the screen, the footer will rest at the bottom of the screen.
2. If there is enough content to fill up the screen and the screen requires scrolling, the footer will move with the content, always resting below it.
If you would like this behavior, here are some things you can implement.
Either create, or edit an existing, CSS web file.
Share
Report
All responses (
Answers (
html,
body {
height: 100%; /* Set to 100% of the container */
}
body > footer {
top: 100vh; /* pushes the footer outside the visible area */
position: sticky; /* pulls it back up and sticks it to the bottom edge */
}
The above CSS will handle the bulk of the work without requiring you to edit anything out of the box (e.g. the footer web template).
Now, you may also want to do something else. The theme.css file that is included with the Power Apps Portals is using a CSS calc() to set the height of the .wrapper-body class. This will cause some slight interference with the sticky footer.
If you see this, then you can apply this extra line to the CSS file that I mentioned above.
.wrapper-body {
min-height: 100px; /* need to set a value to override the theme.css's calc value */
}
That will basically just override the theme.css behavior for the min-height of the div. You can set it to anything, I just picked 100px.
So, there you have it. Here's what my file looks like:
/*
**********************************************************************************************
reset box-sizing,allowing for inheritence. (not required for sticky footer, but I do this regardless)
**********************************************************************************************
*/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
**********************************************************************************************
sticky footer
**********************************************************************************************
*/
html,
body {
height: 100%; /* Set to 100% of the container */
}
body > footer {
top: 100vh; /* pushes the footer outside the visible area */
position: sticky; /* pulls it back up and sticks it to the bottom edge */
}
.wrapper-body {
min-height: 100px; /* need to set a value to override the theme.css's calc value */
}
Thank you, that worked like a charm!
As mentioned by @Fubar , you need to some adjustments to make it. The way I would do it
In portal studio:
1. Upload a custom.css file by clicking themes
2. And add the below CSS class
3. Adjust padding according to your need
.wrapper-body{
padding-bottom: 100px !important;
}
4. Press Save > Sync configuration > Browse website > Ctrl + F5 > Now you can scroll your content.
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
Thanks for your help. I adjusted the class as recommended in the Web Template, and the footer remains in a fixed position at the bottom of the page.
However, now the content is being cut off by the fixed position footer. If any content lands in the footer's area, it is hidden. This is fine as long as there is enough content to scroll down; however, when scrolling completely down there will still be some content that is covered by the footer (sometimes, an important element such as a submit button).
Any tips?
Hi @NewcombR ,
As you aware PowerApps portal is currently using Bootstrap 3 as the base theme. According to Bootstrap 3 it is a standard as far as I am aware.
However we can always customise the way we want. Here are the steps for your reference.
In Portal Management:
1. Under Content > Web Templates> Select Footer
2. All you need to do is add the "navbar-fixed-bottom" in the div tag line 2 (like below )
<footer role="contentinfo" class="footer">
<div class="footer-bottom navbar-fixed-bottom hidden-print">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12 text-left">
{% editable snippets 'Footer' type: 'html' %}
</div>
</div>
</div>
</footer>
3. Hit save and close
In Portal Studio:
1. Refresh the page
2. Press the "Sync Configuration" button
3. Browse the website > and hit "Ctrl + F5"
Now you can see as per your requirement your footer always remains at the bottom.
Hope it helps.
------------
If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.
#1
Lucas001
60
Super User 2025 Season 2
#2
Fubar
55
Super User 2025 Season 2
#3
surya narayanan
35
