Putting 2 elements in ion-nav in one line

Ionic Framework ionic-v3
1

Hi,
so I gotta this code:

_html:_

<ion-navbar hideBackButton >

<ion-title>Log</ion-title>

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

  </ion-navbar>

_css:_

.reg{
    text-align: right;
}

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

2

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

Then apply the text-right directive?

3

Expanding on the above…

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

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>
 </ion-buttons>

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

5

Try…

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

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

6

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

7

It only occurs with ion-buttons

8

change color from primary to light

9

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.

10

How to fix it? Is there any easy solution?

11

try using css if you find no good solution

12

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

1 Like
13

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