cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
NewcombR
Advocate III
Advocate III

Entity Form and Page Footer

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.  

1 ACCEPTED SOLUTION

Accepted Solutions

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 

 

ragavanrajan_1-1614749983697.png

 

 

.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.

 

View solution in original post

5 REPLIES 5
ragavanrajan
Super User
Super User

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.

Fubar
Solution Sage
Solution Sage

Also, you may find you need to do some other adjustments if you also have a "footer-top", as the navbar-fixed-bottom can lead to there being a gap between the top and bottom footer elements.

NewcombR
Advocate III
Advocate III

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?

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 

 

ragavanrajan_1-1614749983697.png

 

 

.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.

 

View solution in original post

Thank you, that worked like a charm!

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Users online (9,369)