Putting 2 elements in ion-nav in one line

so I gotta this code:


<ion-navbar hideBackButton >


<div class = "reg">
    <button ion-button (click)="register()">Register</button>



    text-align: right;

and button and the title arent in the same line.
How to change it?

Why not use ion-buttons instead? See: https://ionicframework.com/docs/api/components/toolbar/Navbar/

Then apply the text-right directive?

Expanding on the above…

  <ion-navbar hideBackButton>
    <ion-buttons end>
        <!-- button one -->
        <button ion-button icon-only>
          <ion-icon name="options"></ion-icon>
        <!-- button two -->
        <button ion-button icon-only>
          <ion-icon name="locate"></ion-icon>

Thank you!
And how to change style of the title? (for example font color/ size)
And if I make this like:

<ion-buttons end>
<button ion-button (click)="register()">Register</button>

How to bring back button background? (now it isnt visible0


<button ion-button color="primary" (click)="register()">Register</button>

See: https://ionicframework.com/docs/components/#buttons

Now it isnt visible at all. Without it there is only text “register”.

It only occurs with ion-buttons

change color from primary to light

Ok so now I know what is the issue.
outline works nice.
But color changes only text.
color=“light” changed “register” button and the outline to go little bit grey.

How to fix it? Is there any easy solution?

try using css if you find no good solution

Look at the examples and documentation for buttons. If you have already made CSS changes, you might also want to review those.

1 Like

How did you do, Can you share your code, for me it is not working.

        <ion-header style="height:60px;">
        <div class="toolbar-background-md">
              <!-- <img src="/Users/sathguru/harika/ionic+angular/TetraEmoji/src/assets/icon/tetra_single.png"   style="width: 30px;height: 15px;margin-left: 5px;"  /> -->
              <ion-title >
                   <form (ngSubmit)="submitSearch($event)" class="reg">
                    <ion-searchbar [(ngModel)]="searchQuery" [ngModelOptions]="{standalone: true}" [showCancelButton]="true" placeholder="Global Search"
                   <ion-buttons end >
                    <button ion-button end icon-only (click)="seachbar()">
                        <ion-icon name="search"></ion-icon>