Ionic-framework: ion-list has mysterious 32px margin-bottom on iOS

[martinjbaker]

For some reason there's a 32px margin-bottom applied on ion-list which causes an unnecessary gap after the last item.

Best seen by scrolling the list to the bottom on the demo page:
http://ionicframework.com/docs/v2/components/#lists

Ionic 2 beta 10

[jgw96]

Hello, thanks for opening an issue with us! This is actually by design as this is how the lists look on the native platforms. You can read more about it here. Thanks for using Ionic!

[biesbjerg]

Can you provide more info? I've been wondering about the gap too. I don't see a gap in lists on iPhone's native phone app, App Store etc?

[martinjbaker]

Sorry but at least on iOS that isn't the case. I made an example project in Xcode with a UITableView and there's no gap within the bounds of the tableview when it is scrolled to the bottom. The last item is aligned to the bottom of the tableview. See screenshot and attached project.

SimpleTableView.zip

[martinjbaker]

Also worth mentioning that this problem is new in Ionic 2. I'm converting an Ionic 1 app at the moment and previously didn't have to set margin-bottom to 0 on ion-list.

[mpaland]

I'm facing the same issue due to

ion-list {
  margin: -1px 0 32px 0;
}

in .ios.css
I know this margin should be a fix but isn't there a smarter solution? This big gap is really unwanted if other elements are below the list.

@jgw96 might you reopen this issue?

[jgw96]

Thanks for responding everyone! I have reopened this issue and will be discussing this with our design people.

[pietro909]

Hi, are there any updates? At least a suggestion about the best practice of how to fix it at a global level for the three different platforms.

Thanks

[MessiasLima]

Set this variables in variables.scss

$list-ios-margin-bottom : 0px;
$list-md-margin-bottom : 0px;

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/120