web
You’re offline. This is a read only version of the page.
close
Skip to main content

Announcements

News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages / Page with View rolls u...
Power Pages
Unanswered

Page with View rolls up when records do not fill entire page

(0) ShareShare
ReportReport
Posted on by 41

Hi guys, hope there is an easy fix with this that I have overlooked.

 

Basically I have a page with a view, when there are more than one record to display, the footer acts like a sticky footer and sits at the bottom of the page (so does the spacer), allowing me to scroll through the records without any graphical or UI glitches.

 

However, when I filter the view to display one record (or if the page only has one record), the footer stays at the bottom, but the spacer (red section divider) rides up the page, along with what appears to be another section of the body (grey area), shrinking the background wallpaper size - which is supposed to extend all the way down and touch the footer.

 

Here is an image of the issue:

 

KMP_Uniserve_0-1717778643470.png

 

 

My settings which relates to the footer are as follows:

 

Footer Web Template

 

<footer role="contentinfo" class="footer">
<div class="footer-bottom hidden-print">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 text-centre">
{% editable snippets 'Footer' type: 'html' %}
</div>
<div class="frenchAccessibilityLink">
<a id="frenchAccesssibleLink" target="_blank"></a>
</div>

</div>
</div>
</footer>

 

 

(from CSS file)

 

html {
box-sizing: border-box;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

/*
**********************************************************************************************
sticky footer test
**********************************************************************************************
*/
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 */
/* padding-bottom: 100px !important; */
}

/* reduce footer height */

footer .footer-bottom{
height: 50px !important;
}

 

/////////////

 

Edit: I have noticed that this appears to occur when using a larger external display monitor (eg 32inch), as opposed to my laptop.

 

On my laptop (16 iches) the page does not display any large gaps when only one entry / record is displayed on a page, whereas when I connect my latop to a larger display and load the same page, the image is rendered as shown in the above screenshot.

 

Is there a possibility that I have set the screen size (somewhere) to the screen size of my laptop and not dynamic for it to change depending on the displays screen size?

Categories:
I have the same question (0)

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Season of Sharing Community Challenge Launch!

Jump in, show your community spirit, and win prizes!

Kudos to our 2025 Community Spotlight Honorees

Expanding mentorship, skilling, and AI innovation

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Pages

#1
11manish Profile Picture

11manish 50

#1
11manish Profile Picture

11manish 50

#3
Valantis Profile Picture

Valantis 26

Last 30 days Overall leaderboard