How to set the footer remain at the bottom of the window in PowerApps Portal
ragavanrajan
7,023
Like
Share
ReportHello Folks,
As you are aware currently Power Apps portal is using Bootstrap 3 as the base theme. Currently, in the PowerApps portal, the footer hides your form content or web page content.
We can always customize the way we want. Here are the steps for your reference.
In Portal Management:
- Under Content > Web Templates> Select Footer
- 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>
- Hit save and close
Now 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.
Comments
-
How to set the footer remain at the bottom of the window in PowerApps Portal
First add class="d-flex flex-column min-vh-100" in body tag.
Then, add class="mt-auto" in footer worked for me.<body class="d-flex flex-column min-vh-100"> <div class="footer-bottom mt-auto"> <div class="container"> <div class="row"> <div class="col-lg-9 col-md-9 col-sm-9 text-start"> <div class="xrm-editable-html xrm-attribute" data-languagecontext="English"><div class="xrm-attribute-value"><p>Copyright © 2024. All rights reserved.</p></div></div> </div> </div> </div> </div> </body> -
-
*This post is locked for comments