Ionic scroll doesn't observe bottom margin of last-child

(I wonder if this issue hasn’t been addressed elsewhere, since it quite leaps to the eye?)

Look at the scroll element that is translated when using Ionic’s custom scroll implementation. It’s a simple container with no special overflow or padding properties – thus, when its last-child has margin-bottom, it is subject to margin-collapsing.

On most any page I can think of, the last child element has margin-bottom; it could be a list-inset element or a card. However, due to the rules of collapsing margins, this margin ends up outside the parent scroll-container without the latter changing its height.

So, when reaching the bottom of the scroll, the bottom margin of the last element (20px by default) isn’t shown – the element is flush with the bottom edge of the view, looking pretty cramped (I’ve actually only looked at this in an app with bottom tabs).

Setting overflow: hidden on the scroll container would prevent this from happening. I wonder whether this would have any bad side-effects?

[dalgard]

I see exactly what the problem is:

In your excellent example, you’ve put the cards inside an <ion-list> (same as putting them inside a <div class="list">, I suppose). The list element makes sure their margins don’t collapse with <ion-content> by having its padding-top and padding-bottom set to 1px.

The documentation doesn’t mention the containing list element at all and I see a couple of reasons why one would think that the card elements go directly inside <ion-content> – one being that cards themselves in many cases get a list class, and another that they are put directly inside a content element in the right side preview.

I don’t mean to say that there’s anything illogical about having the cards inside a list, of course, but it should probably be explicated. (Also, I don’t expect people to inspect the preview pane with devtools, but some might… 😉)

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.