2

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.

1
  • I think that's remains white because the ion-content doesn't get any lower. That's the footer. Did you tried to had more height to the ion-conten? That's may not be the best answer, once the resolution of devices is not the same and it may cover some content in smaller devices... That's will look very good if it works the way you want
    – jcmendes98
    Jan 10, 2020 at 15:21

3 Answers 3

6

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.

1
  • Thank you buddy, I just have updated my global.scss with your code and got it working. Also we need flex: 1 there along with position: unset !important to make that tabs stick to the bottom.
    – Yash Jain
    Jan 13, 2020 at 7:06
4

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>
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.