How to get rid of white ion tab bar?

Ionic Framework
1

Hi guys, I encounter a bug when changing my ion bar using scss.

Screenshot 2021-05-08 at 5.32.16 PM
Screenshot 2021-05-08 at 5.32.16 PM716×1418 148 KB

As shown above, there is a white box behind my customize floating ion bar. I can’t seem to remove it and I want to remove that white rectangle box. Here’s my code:

tabs.page.html:

> <ion-tabs #tabs (ionTabsDidChange)="setCurrentTab()">
> <ion-tab-bar slot="bottom" >
> <ion-tab-button tab="tab1">
>       <ion-icon name="document-text-outline"></ion-icon>
>       <ion-label>Notes</ion-label>
>     </ion-tab-button>
> 
>     <ion-tab-button tab="tab2">
>       <ion-icon name="help"></ion-icon>
>       <ion-label>What's Next?</ion-label>
>     </ion-tab-button>
> 
>     <ion-tab-button></ion-tab-button>
> 
> 
>     <ion-tab-button tab="tab4">
>       <ion-icon name="book"></ion-icon>
>       <ion-label>E-books</ion-label>
>     </ion-tab-button>
> 
>     <ion-tab-button tab="tab3">
>       <ion-icon name="information-circle-outline"></ion-icon>
>       <ion-label>Info</ion-label>
>     </ion-tab-button>
>   </ion-tab-bar>
> 
> </ion-tabs>
> 
> <ion-fab vertical="bottom" horizontal="center" slot="fixed">
>   <ion-fab-button>
>     <ion-icon name="add-outline"></ion-icon>
>   </ion-fab-button>
>   <ion-fab-list side="top">
>     <ion-fab-button href="https://www.facebook.com/groups/320930668903105/"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
>     <ion-fab-button href="http://m.me/jomstudyapp"><ion-icon name="call" ></ion-icon></ion-fab-button>
>     <ion-fab-button href="https://instagram.com/jomstudyapp"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
>   </ion-fab-list>
> </ion-fab>

Blockquote

tabs.page.scss

ion-fab > ion-fab-button{
–box-shadow:none !important;
bottom: 13px;
position: relative;
–background: white;
–color: black;

ion-icon {
font-size: 30px;
}

}

ion-fab-list{
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 20px;
left: -115%;
padding-bottom: 20px;

ion-fab-button{
–background: transparent;
–color:black;
width: 48px;
height: 48px;

  ion-icon{
  	font-size: 24px;
  }

}
}

ion-tab-bar {
–background:#ffffff;
box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4);
border-radius: 16px !important;

height: 50px;
width: 90%;
padding-top: 5px;
padding-bottom: 5px;

bottom: 20px;
position: relative;
margin: 0 auto !important;
border-top: none;

}

ion-tab-button {
border-radius: 16px !important;

&::before {
  background-color: transparent;
  display: block;
  content: "";
  margin: 0 auto;
  width: 20px;
  height: 2px;
}

&.tab-selected::before {
  background-color: white;
}

}

Appreciate any help I can get, thanks!

2

hi there, if you dont want to use the tabs just remove them from your app folder, remobe the folders called tabs, tab1, tab2 …etc. Just remember update the router an app component if they dont update automatic.

In future if you dont want tabs when you generate the proyect choose ionic blank.

Hope this help.

Regards

3

Hi! Thank you for your reply!

I can’t remove the tabs under the app folder (tab 1,2,3) because the floating customised ion bar navigates to those folders.

I was wondering it may be something to do with the variable or global SCSS.

4

you could go to tabs and put some ng if, with a service or obserbable make the ng if false to hide the tabs.

for example, when tabs-control is false the tabs get hidden

<ion-tab-bar *ngIf="tabControl" slot="bottom" translucent>

    <ion-tab-button tab="tab2">
        <ion-icon src="../assets/customIonIcons/storefront-outline.svg"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab1">
        <ion-icon name="construct-outline"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
        <ion-icon name="person-outline"></ion-icon>
    </ion-tab-button>

</ion-tab-bar>