I'm unable to create ionic tabs properly as per screenshot 2

Sandip Developer 0
Viewed 40

I'm trying to make this, but it's not successful. Screenshot no 1 is my working view. The home icon top part is getting cut off. Please check screenshot no 2, I want this design. Please check below IONIC code view.

HTML Code:

 <ion-tabs class="home-bottom-tabs">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{'Home' | translate}}</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="categories">
      <ion-icon name="grid"></ion-icon>
      <ion-label>{{'Category' | translate}}</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="cart">
      <ion-icon name="basket"></ion-icon>
      <ion-label>{{'Cart' | translate}}</ion-label>
      <ion-badge color="danger" *ngIf="data.count != 0">{{data.count}}</ion-badge>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

SCSS Code:

ion-badge {
    min-width: 18px; font-size: 12px; left: calc(50% + 3px);
}
ion-tab-bar {
    --border: 0; height: 64px; --background: #fff; box-shadow: rgba(0,11,35,0.15); overflow: inherit !important;
    ion-tab-button{ overflow: inherit !important;
        .button-native{
            overflow: inherit !important;
        }
        ion-icon{ color: #6c6c6c; margin: 0px; }
        &.tab-selected{ overflow: inherit !important;
            ion-icon{ min-width: 20px; max-width: 20px; min-height: 20px; max-height: 20px; margin-top: -18px; position: relative; padding: 14px; border-radius: 100%; color: #fff; box-shadow: 0 10px 25px rgba(28, 122, 59,0.30);
                background: rgb(85,171,116);
                background: linear-gradient(81deg, rgba(85,171,116,1) 0%, rgba(99,195,95,1) 100%); }
        }
    }
}
ion-label{ color: #6c6c6c; font-size: 14px; margin-bottom: 0px; margin-top: 2px }

Screenshot 1:

Screenshot 1

Screenshot 2: Screenshot 2

ionic5 ionic-framework
1 Answers

Ionic's tab-bar uses "contain" CSS property, that allows the browser to optimize its rendering by telling it that for sure no content will overflow out of the element's bounding box. Which is exactly what you are trying to achieve. It is like overflow: hidden, but on lower level. You need to override that.

  1. ion-tab-bar has contain: strict by default, which is the same as contain: size layout style paint. The "paint" part is what you need to get rid of - by setting it to contain: size layout style. This way you get at least some of the performance benefits from the containment, but the browser will render the overflowing content.
  2. the ion-tab-button wraps its content to a.button-native with overflow: hidden by default. This is tricky, because it is hidden in its shadow dom. So, to override it from outside, use ::part pseudoelement selector.

Adding something like this to the app component's stylesheet or global stylesheet should do the trick (of course, you can replace the !importants with classes or something similar more manageable - this is just for the demo).

ion-tab-bar { 
    contain: size layout style  !important; 
}

ion-tab-button::part(native) {
    overflow: visible !important;
}

See updated fiddle: https://jsfiddle.net/930qmx1s/

Ondra Koupil0
Related