ionic-framework
ionic-framework copied to clipboard
Footer toolbar should not have safe-area-inset-bottom with tab-bar active
Bug Report
Footer toolbar adds safe-area-inset-bottom padding although it was already added for ion-tab-bar on iPhone X
Ionic version:
[x] 4.x
Current behavior: Padding in footer toolbar added beneath buttons, that should not be added with tab-bar visible.
Expected behavior: No safe-area-inset-bottom padding on toolbar in ion-footer if there is ion-tab-bar on bottom already.
Steps to reproduce: Create ionic 4 tab starter and add ion-footer with ion-toolbar inside.
Other information: Bug was already opened for Ionic 3 once: https://github.com/ionic-team/ionic/issues/13615
Ionic info:
Ionic:
ionic (Ionic CLI) : 4.10.3 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.2
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.4.0
Cordova:
cordova (Cordova CLI) : 7.1.0
Cordova Platforms : ios 5.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)
System:
Android SDK Tools : 26.1.1 (/Users/pascalgraf/Library/Android/sdk)
ios-deploy : 1.9.4
ios-sim : 7.0.0
NodeJS : v10.14.1 (/usr/local/bin/node)
npm : 6.7.0
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61
Could be fixed with following line of code
ion-tabs {
ion-footer ion-toolbar:last-child {
padding-bottom: 0;
}
}
Something similar happens when opening the keyboard... The native keyboard already adds the safe-area-inset-bottom
so there's no need to add it to the ion-footer
as well:
Thanks for the issue! The extra padding with both a tab-bar
and an open keyboard have been resolved via https://github.com/ionic-team/ionic-framework/pull/25746 and the fix will be available in a future release of Ionic.
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.