How to pushPage with tab-bar without losing the tab-bar / blink bug

[hirbod]

Hi @argelius,

I don't know if it is a bug or maybe I did something wrong, but how could I actually keep the tab bar visible when I do a pushPage inside a tab-view.html?

<ons-page ng-controller="TabBarController">

    <ons-tabbar animation="fade" keepPage="true" var="roottab">
        <ons-tab page="neighbor.html" label="" active="true">
            <ons-icon icon="ion-map" class="tab-icon"></ons-icon>
        </ons-tab>

        <ons-tab page="gossip.html" label="">
            <ons-icon icon="ion-planet" class="tab-icon"></ons-icon>
        </ons-tab>

        <ons-tab page="chatrooms.html" label="">
            <div class="notification reply-notification"></div>
            <ons-icon icon="ion-chatbubbles" class="tab-icon"></ons-icon>
        </ons-tab>

        <ons-tab page="tab-news.html" label="">
            <div class="notification earth-notification"></div>
            <ons-icon icon="ion-earth" class="tab-icon"></ons-icon>
        </ons-tab>
    </ons-tabbar>

</ons-page>

This is for example my tab-bar.html page. I open this page also with a pushPage, but when I make a pushPage inside neighbor.html, it works, but will not be inside of that tab - instead, it will be over the tab-bar. What do I have to do? Is this expected?

[hirbod]

Hi @argelius,

i've searched around a bit and found out how to achieve this.
I just removed

<ons-page>

inside my my "neighbor.html" (which is one of my tab-pages) and wrapped

<ons-navigator var="inside">

around it. In my controller, instead of using the main navigator (with var appNavigator), I use

inside.pushPage();

It just works, when my opening page has an <ons-page> inside of it but still seems to break some controller code (need to figure out what).

But now, every 1-3 times, I have a very ugly blink bug. Do you have any quick workaround or am I'm doing something wrong?

Just to mention, that my main Navigator is only present for just a second when I start the app.
It's not inside of my index.html, but I have a home2.html, which initis onload and directly resetToPage to home.html (just did that nasty stuff because I did not know how to do this stuff right in the beginning of my PhoneGap App.. now I would do that of course much smarter. I'm just telling you that to be sure I have mentioned all related stuff to reproduce this bug.

<ons-navigator title="Navigator" var="appNavigator">

To cut the long story short, I don't think that this blink-bug is caused trough the way I've created the inital Navigator, I guess there is something else playing bad with me.
Here is the bug. And no, it's not me on that video :D

https://www.youtube.com/watch?v=In6PAyYCJNI&feature=youtu.be

[argelius]

Thanks @hirbod ,

Is it possible for you to create a minimal example that reproduces the blink bug?

[hirbod]

This will be very hard I guess. There is a lot of logic and stuff related, JSON calls to the server etc.

I don't know if this could help, but we could make an appointment, where you could connect to my Mac trough team viewer?

[hirbod]

But as I have this blink bug even somewhere else i'm quite sure it is related to ons-list. Cause in my other page which gets pushed even also without the second navigator, it blink. I'm trying to verify that and will update later. Merry Christmas by the way (if you celebrate)

[hirbod]

Hi @argelius,

so I did some more investigations.

• Removed the mainController -> nothing changed
• Removed the ons-list and ons-rows from the calling page -> nothing changed
• Removed ons-page and wrapped with a div ng-controller instead -> nothing changed
• Even called an empty page -> still blink bug

The bug only occurs with animation: slide. If I use animation: fade, it does not flicker, but thats not an option here.

If I do this pushPage in my main navigator, I do not have this blink bug, the profile page just loads fine, but without the tab-bar...

Maybe related with #301 (which was fixed and worked for me) and #210 and #228
This seems to be always a very similar kind of bug..

[argelius]

Merry Christmas, @hirbod !

I'm Swedish so I celebrated Christmas yesterday. You celebrate on the 24th in Germany as well, right?

I'll see if I can reproduce it. I'm a bit busy so maybe not today but in the coming days.

[hirbod]

Thanks for your response @argelius,
yes, we also celebreated yesterday, so, belated christmas wishes :)

Thanks for your effort.

[hirbod]

Hi @argelius,

any update?

[ghost]

Hi @hirbod,

I had been tackling the same problem, although my program had only one ons-navigator.
My bug was caused by ons-toolbar put in the same hierarchy as ons-navigator.
I put the toolbar in upper hierarchy (the same as ons-tabbar), and the program worked fine.
If you use ons-toolbar with navigator, this might help you in some way.

[ghost]

I forgot to say that you need to modify css of .tab-bar__content or some elements if you put any elements out of ons-tabbar.

[hirbod]

Could you share your CDs modifications with me? Thanks

[ghost]

ons-toolbar (.navigation-bar) 's height is defined as 44px by default, so this will work.

.tab-bar__content{
  top: 44px;
}

Plus you may have to keep extra 20px height for iOS status bar area.
So something like below or more styling will be needed.

.navigation-bar, .navigation-bar__item, .navigation-bar__left, .navigation-bar__right, .navigation-bar__center{
  height: 64px;
}

[ghost]

Ah, this will be needed, too.

.page{
  top: 64px;
}

[ghost]

About page initialization, I have a solution. You can use angular's run block and ng-if directive.

angular.module('app', ['onsen'])
.run(function($rootScope){
  var obj = {};
  /* some initializing prosess */
  $rootScope.someData = obj;
});

<ons-page ng-if="! someData">
  Contents During Initialization
</ons-page>
<ons-tabbar ng-if="someData" animation="fade" keepPage="true" var="roottab">
        <ons-tab page="neighbor.html" label="" active="true">
            <ons-icon icon="ion-map" class="tab-icon"></ons-icon>
        </ons-tab>
        <ons-tab page="gossip.html" label="">
            <ons-icon icon="ion-planet" class="tab-icon"></ons-icon>
        </ons-tab>
        <ons-tab page="chatrooms.html" label="">
            <div class="notification reply-notification"></div>
            <ons-icon icon="ion-chatbubbles" class="tab-icon"></ons-icon>
        </ons-tab>
        <ons-tab page="tab-news.html" label="">
            <div class="notification earth-notification"></div>
            <ons-icon icon="ion-earth" class="tab-icon"></ons-icon>
        </ons-tab>
</ons-tabbar>

$rootScope.someData should be an object, instead of a primitive, that assures the initialization has completed, because of the nature of prototype chain. I usually assign user data of the app to it.

[ghost]

Hi @hirbod,

I think I finally found the cause. What caused the blink were nested <ons-page>s, I suppose. After long struggling, I found my code had nested <ons-page>s. Then I straightened my DOM structure, removing the nest, and the ugly blink bug finally dissapeared. OnsenUI doesn't seem to allow nested <ons-page>s after all. Your code apparently has nested <ons-page>s, so try removing it. I hope you will find it working.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.