remove white background from ion-tab-bar ionic 4

Question

In my Ionic 4 project, I have tabbed interface in which I have 4 tabs.

I tried to customize the ion-tab by adding some custom css on ion-tab-bar to make rounded corners like this.

I have used following code to achieve this design.

ion-tab-bar {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

ion-tab-button {
    transition: 0.2s ease-in;
}

.tab-selected {
    border-bottom: 4px white solid;
    // transition: 0.2s ease-in;
    font-size: 0;
    ion-icon {
        transform: scale(1.3);
        transition: 0.2s ease-in;
    }
}

The problem I am facing here is, there is a white background on the top which is over lapped over the cards which I am showing on selected tab page.

I don't know why that white background is appearing over the cards. I want that to be transparent. I have tried to change the background color through scss file of tabs component but that didn't work for me. How can I remove that white background on ion-tab-bar.

Answer 1

Taking a look at the DOM in dev tools, the ion-tabs component looks basically like this:

<ion-tabs>
   <div class="tabs-inner"></div>
   <ion-tab-bar class="md hydrated" slot="bottom"></ion-tab-bar>
</ion-tabs> 

Taking a look at the tabs-inner class in the Ionic source code, you'll see this:

.tabs-inner {
    position: relative;

    flex: 1;

    contain: layout size style;
}

If you update the css position of the div from relative to unset you can achieve what you are trying to do. I'm not a CSS expert so there may and probably is a cleaner way to override this style. That said, here is one solution.

In your global.scss file you can override the class by adding this:

 .tabs-inner {
    position: unset !important;
 }

Keep in mind that this style will be applied to all Tabs pages you have in your app.

I created a repo for reference.

Hope this helps.

Answer 2

Anyone still dealing with this issue and looking for a more elegant solution, add the following to the CSS class of the ion-tab-bar:

ion-tab-bar {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

Then, add a padding (with the height of your tab-bar) to the bottom of your ion-content:

ion-content {
  --padding-bottom: 3.125rem;
}

Finally, don't forget to set the ion-content to full screen:

<ion-content fullscreen> ... </ion-content>