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!
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')
});
}
Nsimoncini:
ion-fab-button
show me your ion-fab-button css
jatton
January 9, 2022, 9:12am
5
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);
}
}