Ion-tabs and hide-nav-bar doesnt work, i have tried everything

1

I wanted to hide the nav-bar on a view within tabs

Have tried top:0 on .tabs also and hide-nav-bar also

Appaeranty in ion-view if i use hide-nav-bar it leaves space befor the tabs and making it to top:0px (.tabs { top: 0 !important; }) leaves space between content and tabs

see image below

When using hide-nav-bar on ion-view:

image
1-ion-orignal.png1058×244 2.84 KB

With .tabs { top: 0 !important; }:

image
2-ion.png870×241 3.57 KB

However , nav bar hides on tabs bottom and there is no space when it on bottom

2

Hi,
This is because of the .has-tabs-top class that is being added to the ion-content element.
Try also adding this:

.has-tabs-top {
  top: 49px; !important /*  height of the tabs */
}
1 Like
3

Thanks alot @bokboki2002 that works , great

how to learn about these minor details? have wasted 3 days on this had to submit my project but this wasnt solving , i will be grateful to know the learning resource for these advance things

4

For me this was also trial and error in the beginning. I know that Ionic separates iOS and Android design by adding .platform-ios or .platform-android CSS classes to body element. What I do when I want to change some default style is that I look at the Chrome Inspector Tools (with Device mode enabled). This way I can switch between Iphone 6 or Nexus 5 devices and see what has changed in the DOM and what classes are applied to elements. That is how I noticed the .has-tabs-top class.

5

Great @bokboki2002 this information and suggestion are very useful indeed thanks alot for sharing this :smile: