Ionic button on right side in navbar

Thanks for asking this. I’m newie using Ionic 2 and I wondering if it’s possible to use a single NavBar to the rest of pages of a MenuSide. Greetings.

I think your problem is only in android devices because start attribute place button to the start of component. In ios, start of component is top-left but in android, start of component is top-right.

my probem is when using 3 buttons. the last one stay above de second one. Why is this happening someone?
image

Work like a charm.
Thanks.

Is there any tag/class/style that one can use on your own button put in the header to make it look like the back button that is default shown for the navigation? I have an issue where I want to show a back button on a page that has tabs but ionic2 seems to start a new navigation stack on pages with tabs for some reason so I have to emulate this by adding my own back button. Although I have been able to get this working, the size of the icon and the size of the text is totally different to how the back button presents them when using the default “button ion-button” with an “ion-icon” inside.

Hi John, try the following, works for me in modals and tabs (where a new root page/navigation stack is in place)

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="viewCtrl.dismiss()"><!-- or your method, this is for closing a modal -->
         <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>page title</ion-title>
  </ion-navbar>
</ion-header>

Thanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (Y)

Yes, I think you are right. I am using the buttons in a footer and want it on the left in all cases/devices -replacing start with left seems to work

For me the issue was, that Android and iOS have different default order of buttons in navbar. On iOS <ion-buttons start> and <ion-buttons end> work as expected, but for Android (MD) order of elements is changed, so by default they are sorted as .. <content> <ion-buttons start> <ion-buttons end> .. so buttons from start are on right side of navbar.

You can change that by adding this to your /app/app.scss:

.bar-buttons-md { order:3; }
.toolbar-content-md { order:4; }

This code makes button order equal for iOS and Android (MD). It should be changed by changing SASS variable $toolbar-order-md, but it didn`t work for me.

Better late than never? To have two buttons side by side in the header, use <ion-buttons for each button e.g. two buttons on the right…

<ion-buttons end>
<button ion-button (click)="toggleReorder()">
  <ion-icon name="swap"></ion-icon> 
</button>
</ion-buttons>

<ion-buttons end>
  <button ion-button menuToggle="helpMenu">
  <ion-icon right name="more"></ion-icon>
</button>
</ion-buttons>
1 Like

I have seen them and I too coded them into a single ion-buttons tag, like so

<ion-header>
    <ion-navbar>
        <MediaListTitle>...</MediaListTitle>

        <ion-searchbar *ngIf=SearchOn (ionInput)="FilterItems($event)" [class.SearchBar]="true"></ion-searchbar>

        <ion-buttons end  class="UMSNavButtons">
            <button ion-button (click)="SearchToggle()"><ion-icon name="search"></ion-icon></button>
            <button ion-button (click)="Share()"><ion-icon name="share"></ion-icon></button>
            <button ion-button (click)="Settings()"><ion-icon name="more"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

I managed to dock them bottom right in the ion-navbar with the attached style but…
They appear a bit small, how can I override their size and spacing (I assume set by ionic)
Thanks

You should add the icon-only attribute to the button. <button ion-button icon-only etc…

1 Like

Thanks @luukschoen I learned something new, I had used icon-only before, however only on the 3rd button and all buttons rendered the same but much smaller (icon only without surrounding button) and were driven me nuts :slight_smile: Eventually, in my guess work I ended up removing it.

So, you have to apply it to all :slight_smile: I get this…

image

Now they are more touch usable :slight_smile:
image

Here is my scss
Note: if I apply it to ion-buttons, I get a lot more spacing.

(The background-color is temp for debugging, I am poor at css)

.UMSNavButtons {
    background-color: beige;
    position: absolute;
    width:50vw;
    bottom:0;
    right:0;
 
    size:10vh;    
}

Maybe this will help others, as I use it across my projects which requires right-to-left support

I wanted to preseve the framework as is, w/o playing around with the button ( removing it and write the code my own etc … ) because that is a special button that appear in certain conditions, it’s not always there.

I’ve added the following SCSS globally in my app to support all kinds of right-to-left

.mirrorY     {          transform: rotateY(180deg);   
                -webkit-transform: rotateY(180deg);
}
.rtl         {  direction: rtl;     }

in my page where I needed to switch the button to the right - I kept the code as is:

<ion-header>
  <ion-navbar>
    <ion-title> some title </ion-title>
  </ion-navbar>
</ion-header>

And in the SCSS file that is related to this component I’ve added the following

  • rtl: some of Ionic components rules are checking the direction of the element and add further css.
  • mirrotY: because I want the back arrow Icon - to point to the other way.
my-selector-page {
    ion-navbar {
       @extend .rtl;

        button {
            @extend .mirrorY;
        }
    }
}

ion-buttons[start] {
order: 2;
}

This worked well, especially i was looking at the “icon-only” directive to make the icons in same size. Great solution. Where can i find documentation for such things?

In the documentation of the buttons :wink:

or in the api

<ion-header>
  <ion-navbar>
    <ion-title></ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="doSomething($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

Try this code.

<ion-navbar hideBackButton="true">
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>

    <ion-title>Title</ion-title>

    <ion-buttons end>
        <ion-icon ios="ios-cart" md="md-cart"></ion-icon>
    </ion-buttons>
</ion-navbar>

This works for me fine.

left attribute worked for me.