cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
ragavanrajan
Most Valuable Professional
‎03-18-2021 08:53 PM

How to set the footer remain at the bottom of the window in PowerApps Portal

Hello 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: 

 

  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>

 

 

  1. 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
Helper II
‎09-05-2022 04:56 AM

Adding the navbar-fixed-bottom to my footer solved my similar issue.  Thanks!

0 Kudos
Helper II
‎12-12-2023 04:09 PM

Saved the day, thank you so much!

‎03-21-2024 04:16 PM

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>

 

 

 

0 Kudos