ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

Footer toolbar should not have safe-area-inset-bottom with tab-bar active

Open Spinnenzunge opened this issue 5 years ago • 2 comments

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. image from ios

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

Spinnenzunge avatar Feb 21 '19 12:02 Spinnenzunge

Could be fixed with following line of code

ion-tabs {
  ion-footer ion-toolbar:last-child {
    padding-bottom: 0;
  }
}

Spinnenzunge avatar Feb 21 '19 13:02 Spinnenzunge

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:

Footer

sebaferreras avatar Jan 10 '20 14:01 sebaferreras

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.

amandaejohnston avatar Aug 16 '22 18:08 amandaejohnston

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.

ionitron-bot[bot] avatar Sep 15 '22 18:09 ionitron-bot[bot]