Bug: Ionic Creator Output In Index.html Appears to Override Tab Positioning Styles


#1

I was making this CodePen to mimic my local application as I’m having some issues getting a back button to show up in a tab view that is a child of Sidemenu view, and the tabs were under the header instead of 43px down page, but when I created the same markup in the CodePen the tabs weren’t hidden under the header anymore.

// seems to be related to this set of styles
.nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs { 
    top: 0; 
}

// which overrides this set of styles, but only locally.  On CodePen the above  
// set of styles aren't applied and you can see the tabs are displayed properly
// using just the below styles
.tabs-top > .tabs, .tabs.tabs-top { 
    top: 44px; 
    padding-top: 0; 
    background-position: bottom; 
    border-top-width: 0; 
    border-bottom-width: 1px; 
}

If in Chrome dev tools I remove top: 0 from the first bit of CSS it displays as it should, and looks like the CodePen. I’ve gone up through the markup level by level and they both contain the same components etc, except at the top-level.

Apparently the output from Ionic Creator does this in the index.html:

<body>
    <div>
        <div>
            <ion-nav-bar class="bar-light">
               <ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
            </ion-nav-bar>
            <ion-nav-view></ion-nav-view>
        </div>
    </div>
</body>

But if I remove everything but the ion-nav-view

<body>
    <ion-nav-view></ion-nav-view>
</body>

Now the tabs aren’t hidden under the header anymore. Is there a reason the ion-nav-bar is located in the index.html file? Removing it doesn’t appear to have destabilized anything… but I might be wrong. To test this I added the markup that was causing the issue into the CodePen and the tabs disappear under the header like they did locally. I’ve left both the Creator output in the CodePen for anyone to uncomment and see that it prevents the tabs from being displayed.


#2

This appears to be a bug, so I filed it on GitHub.


#3

I had the same problem a couple of days ago and resolved the same way.

In fact, I didn’t need to remove everything from index, just the ion-nav-bar.
Also, if I removed from the sidemenu template instead of index, it also worked fine. So the problem seems to happen when there are 2 declarations of ion nav bar. But I also don’t see why there would be a need to create two instances of it.

Btw, I couldn’t find the issue on github, did you get a answer?

Oh yeah, I forgot to mention, but I was testing in Android.