Ion-tab-bar overflow Ionic 5

Hi, I’m trying to make the ion-tab-bar overflow visible but I had no luck so far.
I’d like to do something like this:

but as you can see I can only achieve the result with an ion-fab-button placed in the middle of the screen, simulating the real round button.

I tried to put this code in tab.page.scss AND in variables.scss but as I said, I had no luck.

ion-tab-bar {
    background: #121212;
    width: 90% !important;
    max-width: 400px !important;
    border-radius: 30px;
    margin: 0px 0px 20px 5% !important;
    max-height: 56px;
    height: 56px;
    overflow: visible !important;           <---- seems not working
}

In my specific case I could easily use this workaround but maybe we could find a scalable solution for a general case.

Thanks in advance!

Hi!

Did you solved this?

Hi!

Maybe it’s too late, but it worked for me (I know, it is not the best solution, but I didn’t find other way)

I created a recursive method and in this method try to get all tab buttons, if it doesn’t, I use a setTimeout to recall the method (the setTimeout is necessary to avoid to fill the stack) and after found all the buttons, I accessed to the shadow root, and I putted some style:

private setStyle() {
    const all = document.querySelectorAll('.tab-has-icon');

    if(all.length === 0) {
      setTimeout(() => {
        this.setStyle();
      }, 0);
      return;
    }

    all.forEach(el => {
      el.shadowRoot.querySelector('.button-native').setAttribute('style','overflow: inherit')
    });
}

show me your ion-fab-button css

Thank you hernangiraldobh,

I have improve the code, in my case el.shadowRoot.querySelector(’.button-native’) was empty at first, it’s require to call the timeout.


private setOverflowTabButton() {
      const all = document.querySelectorAll('.tab-has-icon');
      var found: boolean = false;

      if(all.length > 0) {
        all.forEach(el => {
          const bts = el.shadowRoot.querySelector('.button-native');
          console.log(el)
          console.log(bts);
          if(bts != null) {
            found = true;
            bts.setAttribute('style','overflow: inherit');
          }
        });
      }

      if(!found)
      {
        setTimeout(() => {
          this.setOverflowTabButton();
        }, 0);
      }
  }