blank bottom space on ion-tabs inside ion-content in iPhone X

ionitron-bot[bot] commented 5 years ago

Original issue by @jandres2p on 2018-05-03T19:36:51Z

Ionic version: (check one with "x") (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ x] 3.x [ ] 4.x

I'm submitting a ... (check one with "x") [ x] bug report [ ] feature request

Current behavior:

Display an extra space at bottom of tabs inside content, only in iPhone X

Expected behavior:

Steps to reproduce: On display page. Only in iPhone X

Related code:

<ion-header no-border>

  <ion-navbar [color]="getHeaderColor()">
    <ion-title>
      <span>État des demandes</span> <br />
      <small>{{getClientName()}}</small>
    </ion-title>

    <ion-buttons end>
        <button ion-button icon-only (click)="toggleSearch()"><ion-icon name="search"></ion-icon></button>
    </ion-buttons>

  </ion-navbar>

  <ion-toolbar [color]="getToolbarColor()" *ngIf="toggled" >
        <ion-searchbar
            [(ngModel)]="searchInput"
            (ionInput)="onSearchInput()"
            [formControl]="searchControl"
            (ionCancel)="cancelSearch($event)"
            placeholder="Rechercher par nom ou par #" animated="true">

        </ion-searchbar>
  </ion-toolbar>
</ion-header>

<ion-content no-padding>

    <ion-tabs #statusTime tabsPlacement="top"  [hidden]="toggled" [color]="getToolbarColor()" [ngClass]="getHeaderColor()">
        <ion-tab [root]="tab1" tabTitle="À VENIR" ></ion-tab>
        <ion-tab [root]="tab2" tabTitle="HISTORIQUE" [rootParams]="history"></ion-tab>
    </ion-tabs>

    <div *ngIf="searching" class="spinner-container">
        <ion-spinner></ion-spinner>
    </div>
   ...

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (/path/to/my/project/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node  : v8.10.0
    npm   : 5.6.0 
    OS    : macOS High Sierra
    Xcode : Xcode 9.3 Build version 9E145 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

joaocamargo commented 5 years ago

anyone got the solution for this? I'm facing the same problem ...

sandesh-crontech commented 4 years ago

try this in your page.scss

.tabbar{
    padding-bottom:0px !important;
  }

my ionic info

`Ionic:

   Ionic CLI          : 5.2.4 
   Ionic Framework    : ionic-angular 3.9.4-201903121725
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 7.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 18 other plugins)

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (Android/Sdk)
   NodeJS            : v10.16.0 (node/v10.16.0/bin/node)
   npm               : 6.9.0
   OS                : Linux 5.0`

ionic-team / ionic-v3

blank bottom space on ion-tabs inside ion-content in iPhone X #790