Ionic framework How to fix headers

Question

I'm using the Ionic framework. Clicking on the search icon in the header will bring up a search bar. However, the header moves in the process. What's the problem? And can you reduce the header height and eliminate the border?

Codes:

Main page:

    <ion-menu [content]="content">
      <ion-header>
         <ion-toolbar no-border-top>
            <button  ion-button icon-only menuToggle>
            <ion-icon name="menu"></ion-icon>
            </button>
            <ion-title>Left Menu</ion-title>   
         </ion-toolbar>
       </ion-header>
    </ion-menu>

content part ( searchBar )

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-searchbar   *ngIf="toggled"
       (ionInput)="filterItems($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true"></ion-searchbar>
     <ion-buttons end>
      <button  ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>

Content part script:

public toggle(): void {
      this.toggled = this.toggled ? false : true;
   }
  public cancelSearch(ev){
   ev.target.value='';
   this.toggled = false;
  }

Answer 1

You'll want to place the first button in an ion-buttons directive too:

<ion-header>

  <ion-navbar>

    <ion-buttons start>
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>

    <ion-searchbar   *ngIf="toggled"
       (ionInput)="filterItems($event)"
       (ionCancel)="cancelSearch($event)"
       (ionClear) = "cancelSearch($event)"
       [showCancelButton]="true"></ion-searchbar>

     <ion-buttons end>
      <button ion-button icon-only #button2 *ngIf="!toggled" (click)="toggle()">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>

  </ion-navbar>

</ion-header>