Bounce back (scroll) position on list - has a gap between content and footer

[bensperry]

Copied from forum: http://forum.ionicframework.com/t/bounce-back-scroll-position-on-list-has-a-gap-between-content-and-footer/548

When we use scroll in a list the "bounce" doesn't always exactly align with the content height (when you scroll too far, and the bounce returns you up to the list)

Status bar (carrier, wifi, time, battery)
Header
Content (that scrolls)
GAP that shouldn't be there
Footer

There is a gap between the bottom of the content, and the footer. The gap looks correlated in vertical height size with the number of items in the list. The top of the content to the header is pixel perfect.

I think this is a potential bug. Alpha Lynx (but was in previous versions too)

EDIT: Should add that this is a list made up of item-image. A list that I have with no images in actually ends up a few pixels short..... so footer overlaps with bottom of content (But I can fix that by adding a spacer at the bottom of the list!)

[alexbainbridge]

This is a slightly different gap depending upon whether Pull To Refresh is active or not.... with PTR the gap is a little larger actually.

The footer - has icons and text in....

[ajoslin]

Fixed by user putting .scroll { height: 100% }: http://forum.ionicframework.com/t/bounce-back-scroll-position-on-list-has-a-gap-between-content-and-footer/548/2

In general, if the page isn't full the scroll doesn't fill up the whole height.

I think we need to make scroll class have min-height: 100% - then it will always be at least a whole screen tall - just using height will have it cut off.

[alexbainbridge]

OK great :)

That takes us forwards!

So now I have 2 remaining (associated) issues

A) On a list with pull to refresh - the gap at the bottom looks the same as the pull to refresh vertical height...... Without pull to refresh, the gap is not present.

B) Sometimes the scroll (bottom) is too far up - so the bottom area is actually hidden (and can't be shown without it bouncing back up to hide the very bottom again).... This is actually fixable with a spacer at the bottom, but indicates that something is a bit amiss somewhere.

Thanks!

[alexbainbridge]

Latest status
a) The 100% CSS fix, above, does what is needed (but this CSS is not in the framework yet)
b) Pull to refresh still causes an issue - and there is a gap at the bottom equal to the pull to refresh height

[ajoslin]

Thanks @alexbainbridge! I'll work on this tomorrow.

[ajoslin]

Hi @alexbainbridge - I can't seem to reproduce this. I'm starting with this codepen: http://codepen.io/ajoslin/pen/HBLvo.

[alexbainbridge]

ah ha!

http://codepen.io/anon/pen/aKycF
has-footer="true"
Because it has a footer so seems logical to add has-footer="true" ? Certainly seems to be required on most pages / views where footers are shown.

Now there is a gap!

[ajoslin]

Ha, interesting problem. The padding from the .scroll-padding class (10px) plus the margin-bottom from the .list class (20px) plus the has-footer offset (44px) totals a 74px offset, which creates a visible gap at the bottom.

Here's a codepen with no margin-bottom on the list that looks a lot better: http://codepen.io/ajoslin/pen/bhEut

Perhaps something that would be useful is a last-child no margin-bottom rule for list:

.list:last-child {
  margin-bottom: 0;
}

@adamdbradley wat do you think?

[alexbainbridge]

For context, reason why this is all important is that the last item in the list is an image - and I want the bottom of that image to line up exactly with the top of the footer..... (which actually I have as tabs rather than a footer).... not that you need to worry about this, but this is why I am striving for pixel level perfection rather than leaving a few pixels here and there and not worrying about it