Change/Hide ion-nav-back-button text

ionic-v1
1

Hi, I created a new project using the side menu template and i need to hide the back button text.
Does anyone know how can i hide this text? I tried all suggestions from ionic.bundle.js but did not work.

1 Like
2

Do you need to remove the button all together or just the text?

To remove the text:
In your menu.html temlplate, you’ll see this

<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>

Remove Back and add button-icon to the class.

To remove the back button:
Remove the entire ion-nav-back-button

3

Hey there @mhartington ,

With the latest Beta (14) this broke. I have the following code that was working properly before upgrading.

<ion-nav-bar class="bar-dark">
    <ion-nav-back-button class="button-icon button-clear ion-ios7-arrow-left">
    </ion-nav-back-button>
</ion-nav-bar>

Now however, the previous view’s title is showing up next to the arrow after the transition happens. Not what I want.

How do we fix this now?

4

Take a look at $ionicConfiProvider,

2 Likes
5

@mhartington I tried

$ionicConfigProvider.backButton.text('').icon('ion-ios7-arrow-left');

But now the arrow is gone and the previous view’s title is still present.

6

Figured it out. I had to remove `button-icon button-clear’ from my classes and just leave it blank.

<ion-nav-back-button>
</ion-nav-back-button>

Now it works properly, thanks!

In the end I have this

<ion-nav-bar class="bar-dark">
    <ion-nav-back-button>
    </ion-nav-back-button>
</ion-nav-bar>

.config(function($ionicConfigProvider) {
    $ionicConfigProvider.backButton.text('').icon('ion-ios7-arrow-left');
})

image

8 Likes
7 
$ionicConfigProvider.backButton.previousTitleText(false);
10 Likes
8

Thanks.
This should really be mentioned in the doc under the ion nav back button directive.

Here’s what I ended up with. Without the complete thing, the previous title always showed up (pretty annoying).

$ionicConfigProvider.backButton.text('').icon('ion-chevron-left').previousTitleText(false);
9 Likes
9

thats way too much fuss to remove the previous title text. Simple attribute on directive would help a lot…

3 Likes
10

To make the back button text always display “Back”:

$ionicConfigProvider.backButton.previousTitleText(false);

To remove the back button text completely:

$ionicConfigProvider.backButton.previousTitleText(false).text('');

Hopefully this saves someone a few minutes of tinkering and provides some clarity.

14 Likes
11

Also, don’t forget that it needs to be called via the Angular config function:

myApp.config(function($ionicConfigProvider) {
  // back button text always displays "Back"
  $ionicConfigProvider.backButton.previousTitleText(false);
});

Or:

myApp.config(function($ionicConfigProvider) {
  // remove back button text completely
  $ionicConfigProvider.backButton.previousTitleText(false).text('');
});
4 Likes
12

Also, adding a space to the button text string will increase the target area of the of back button.

myApp.config(function($ionicConfigProvider) {
  // remove back button text completely
  $ionicConfigProvider.backButton.previousTitleText(false).text(' ');
});
1 Like
13

image
image.png1417Ă—766 17.6 KB

How to remove space back button to title

i am using
$ionicConfigProvider.platform.ios.navBar.alignTitle('left'); $ionicConfigProvider.backButton.text('').icon('ion-chevron-left').previousTitleText(false);

thanks
chaith123

1 Like
14

This worked great to increase the touch target area size of the back button a bit more:

myApp.config(function($ionicConfigProvider) {
  // remove back button previous title text
  // use unicode em space characters to increase touch target area size of back button
  $ionicConfigProvider.backButton.previousTitleText(false).text('&emsp;&emsp;');
});
1 Like
15

Something is going wrong with this back button… When no additional styles are specified, it draws it as button-positive button-clear. When I like to specify MY own vision to nav bar buttons, and would like to have it button-icon (in a conjunction with header it makes color white) it adds hide to the result classes.
What I could make (except twentish fix to css) to highlight buttons with custom but style, besides this style is ionic’s, and leads to expected result in the other but back button cases
PS So, now I have to apply this

.bar-header {
  > .back-button, .right-buttons, .button-icon, .button {
    color: $button-default-text; //#FFF
  }
}

.header-item {
    &.title {
        color: $brand-secondary;
    }
}

.bar {
    .button {
        &.back-button {
            padding-left: 5px; // 'cause .bar .title + .buttons has right: 5px
        }
    }
}
16

This worked great for me. Thanks!

 $ionicConfigProvider.backButton.previousTitleText(false);

Is it possible to use $ionicConfigProvider to set a custom small image instead of text and icon?

17

@mhartington Does the <ion-nav-back-button> work with slides. Meaning if i advanced through a slide it will automatically appear and when I back up to the first slide it will disappear. Can I also do this for a forward arrow when it reaches the end of the slide.

Cheers

18

Not with ion-nav-back-buttons, but you can use ion-nav-buttons instead.

19

Hi,
I had a similar problem, i wanted to remove the back button default text that appears when the area is too small.
I ended with a simple css:

.back-button > .back-text > .default-title {
    display:none;
}

if you need to remova also the full previous text

.back-button > .back-text > .previous-title 
    display:none;
}

I found this solution much simpler and has also a clean and global behavior.

1 Like
20

Is there a way to do this at controller level?
I dont want the text to appear on just one page.