Mohan Gopi Mohan Gopi - 3 months ago 26
CSS Question

Not able to align my menu button on left side in header

I referred to my button to align left and right

start
and
end
key as per the above link. But i am not able to set my button as per the view in the link here is my output image

enter image description here

Here is my code

<ion-header class="home">
<ion-navbar primary padding>
<ion-row>
<ion-buttons start>
<button menuToggle >
<ion-icon name="menu"></ion-icon>

</button>
</ion-buttons>

<ion-title>Auto Parts</ion-title>

<ion-buttons end>
<button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp;
<button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp;
<button><ion-icon name="cart"></ion-icon></button>
</ion-buttons>
</ion-row>

<ion-row>
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
</ion-row>

</ion-navbar>

</ion-header>


What I have tried so far is:


float: right; and float: left;

algin: right


but not able to get my button to left

Answer

You can achieve that layout by using an <ion-toolbar> to place the search bar like you can see in this plunker

<ion-header class="home">
  <ion-navbar primary padding>
      <button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Auto Parts</ion-title>
      <ion-buttons end>
            <button> <ion-icon name="document"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="heart"></ion-icon></button>&nbsp;&nbsp;&nbsp;
            <button><ion-icon name="cart"></ion-icon></button>
      </ion-buttons>
  </ion-navbar>
  <ion-toolbar primary>
      <ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>
  </ion-toolbar>
</ion-header>

EDIT:

To hide both borders, the no-border attribute should be used on the ion-toolbar. To hide the top or bottom border, the no-border-top and no-border-bottom attribute should be used.