Header bar button flicker

ionic-v1
1

I have a couple ever-present buttons in my header that always need to be there (not the back button, that’s working fine).

The problem that I’m having is these buttons flicker away for a moment, then show up again on every state and route change.

The way I’ve put these icons in my header is by putting them into each template.

Is there a way to have my ever-present buttons exist in the header without flickering whenever I change state or route?

2

Yup, if you’re using an ion-nav-bar, you can just declare your buttons in there.

3

Thanks that worked prefectly

4

Hi @mhartington ,
I have right buuton in my navigation bar using that button i am doing some opration and then going back using $ionicHistory.back() but header flicker while going back.It’s a white color covered whole header for a second…

5

@sandy could you provide an example of it in a codepen?

6

Hi @mhartington ,
i fixed it my self.it has flicker issue if we will use ion-nav-buttons inside ion-nav-bar .
but Its working fine if i am using ion-nav-buttons without ion-nav-bar .

Use this

 <ion-nav-buttons side="right" >          
             <button class="button"  ng-click="SendEmail()" >Send</button>		        
 </ion-nav-buttons>

instead of this below

<ion-nav-bar class="bar-positive">
	<ion-nav-back-button class="button-clear" >
	       <i class="icon-left ion-chevron-left"></i>
	      <img class="nvImg" src="images/logo.png"><span class="nvHdr">Notifications</span>
 	</ion-nav-back-button>
    <ion-nav-buttons side="right" >          
                 <button class="button"  ng-click="SendEmail()" >Send</button>		        
     </ion-nav-buttons>
</ion-nav-bar>

but now how can i customize my navigation back button text dynamically .

7

Can you still provide a codepen demo? I can see what the issue is and try to come up with a solution or open an issue for it.

8

Hi @mhartington,
Please find the code pen for the issue. its still exist with nightly build.
if ion-nav-bar is present on page then its flickering.because in that case nav bar also changing with page otherwise without ion-nav-bar nav bar always static and does not flicker.

9

So just to understand what you want to do for that particular page.
You want to :

  • Navigate to that page and have a button on the right side
  • not have the default back button

So how does this work for you?

10

Yes its working fine…i saw you removed from facts.html and using right button only.

But my requirement is to display back button as well with my custom text.
For the back button my custom text should display in Ion-Nav-Back-Button .

And right button will work as it is.

back button text will change on every page and its not previous page title.

image

11

Okay, so I’m still not following.

  • Show ion-nav-back-button
  • Show custom button on the right

Could you explain in the simplest way possible?

12

Hi @mhartington,

Show ion-nav-back-button with some custom text instead of previous title.
That custom text will be different for all pages.

As per below link I think now you can understood.
http://codepen.io/cvssandhu/pen/emqWPe

but the issue is in this case it flicker.

13

Alright, that makes sense now

.controller('FactsCtrl', function($scope,$ionicConfig) {
  console.log('FactsCtrl');
  $scope.Goback= function()
  {
    console.log('Do something ');
      history.go(-1);
  }
  $ionicConfig.backButton.text("Back?");
})

So you can actually use the $ionicConfig from within a controller

http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

1 Like
14

Awesome!! you guys are great :smile:
This is what i want.but the documentation for this is missing $ionicConfig with example.
i was trying $ionicConfigProvider which woks within config only.
Anyway quick solution.
Many Thanks to @mhartington

15

Well it is in the docs,

These configs can be changed using the $ionicConfigProvider during the configuration phase of your app. Additionally, $ionicConfig can also set and get config values during the run phase and within the app itself.

But we could update the docs and include a small snippet

16 
<ion-nav-bar class="bar-positive"  >
        <ion-nav-back-button><img width="25" height="25"  style="margin-top:5px" src="images/logo.png" /> My Back Button
        </ion-nav-back-button>
    </ion-nav-bar>

while using this above code image and text alignment ok but while assigning back button text within controller then image alignment incorrect as below example.

 <ion-nav-bar class="bar-positive"  >
        <ion-nav-back-button><img width="25" height="25"  style="margin-top:5px" src="images/logo.png" /> 
        </ion-nav-back-button>
    </ion-nav-bar>

 $ionicConfig.backButton.text("Message Details");
17

Can you put this into a codepen?

18

Please check that back button automatically adjust the image and text if we assign text by default
inside ion-nav-back-button

Working Code http://codepen.io/cvssandhu/pen/NPQevO

but its breaking if we assign back button text using $ionicConfig inside controller by using
$ionicConfig.backButton.text(“Custom Back Txt”);

Breaking Code http://codepen.io/cvssandhu/pen/pvMqwY

19

It appears to just be a size issue with the image.

Not sure I see the purpose of having the image and the icon though.

20

How can i remove my previous post on which my company logo displaying.