CODEWITHSUNDEEP
angularionic-frameworkionic4
Yash Jain
Yash Jain

Reputation: 822

remove white background from ion-tab-bar ionic 4

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.

Ion Tab Bar

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.

enter image description here

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.

Upvotes: 2

Views: 2185

Answers (3)

Fer Bastiaens
Fer Bastiaens

Reputation: 131

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>

Upvotes: 4

Rich Tillis
Rich Tillis

Reputation: 1571

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.

Upvotes: 6

jcmendes98
jcmendes98

Reputation: 148

I Tested what i said and that's right. Need to add more height on the content. The height was on the router outlet, that calls the "main info" while showing the tabs. My doubts are relative to the size of the devices. Adding percentage o height is not very good, because on the smaller devices may not showing the entirety of the content. I don't know if the tabs height is the same in all devices, no matter the size. If it is, all you need to do is add, that height to the content. Hope i could help, If you find any solution or a better one please share the updates on this problem. I really liked the solution and how it looks. Hope i could help!

enter image description here

enter image description here

Upvotes: 0

Related Questions