How to get rid of white ion tab bar?

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

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!

1 post - 1 participant

Read full topic