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


#1

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!)


#2

Hey @alexb!

Thanks for posting. I made an issue for this on our Repo: https://github.com/driftyco/ionic/issues/425. I’ll make sure @adam will take a look into this with me next week at the latest!

Cheers!


#3

Hey I think I know what you’re talking about, do you mean when the list bounces back down it doesn’t make it back to the footer? I’m not sure if this is a bug or not, since it seems to align the top of the list with the top of the content.

@adam @max any thoughts?

EDIT: Looks like Ben beat me to it :wink:


#4

Hey guys, I was wondering if anybody had any development?
I did notice that in the content if I were to put overflow-scroll = "false" then there is no space at the bottom.
Any ideas on how to remove the space?


#5

for future reference, in your style sheet just add .scroll { height: 100%} and that got rid off the space for me.


#6

Thanks @mlovekovsky, added a note to the issue. We’ll get to it soon, but it’s on a later milestone.


#7

Thank you, this doesn’t quite fix it (I have 3 different scenarios, this fixes one of them, which is good!)
I will update the github so its clearer what this has done!