Help make ion-tabs background transparent

ionic-v1
1

Hi there-

Really enjoy using Ionic Framework. It makes development tasks so much easier.

I’m having trouble making my ion-tabs transparent. Could someone give me guidance in this realm?

Thanks!

2

You can directly access the styling of the tabs through overriding the default css. In order to make transparent, just set “background:transparent” for the class .tabs

.tabs{
padding-top:0;
background-size:0;
height:38px;
background:#333;
.tab-item{
line-height: 37px;
max-width:100%;
}
i{
min-height:100%;
}
}

3

Though I can see tha these css classes are changing the tab properties, the tabs still fail to show content that lies beneath. Is that what the transparent property should do?

4

I had a similar problem when I tried to make a modal the full height of the screen. Ion-content naturally puts 44px of padding on the top and bottom, for the nav-bar and the tabs, so even if the tabs and nav bar were removed, this white space would still be visible.

my hack was to put a class on the ion-content within your view and apply these styles:

.my-content{
min-height:100% !important;
top:0 !important;
bottom:0 !important;
}

Let me know if that works for you.

1 Like