Help make ion-tabs background transparent

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?


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

line-height: 37px;

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?

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:

min-height:100% !important;
top:0 !important;
bottom:0 !important;

Let me know if that works for you.

1 Like