css - ion-nav-buttons full width -

i trying add search bar header on 1 of page.

<ion-view view-title="">     <ion-nav-buttons side="left">         <label class=" item item-input-wrapper">             <i class="icon ion-ios-search placeholder-icon"></i>             <input type="search" placeholder="search">         </label>   </ion-nav-buttons>    <ion-content>     search content   </ion-content> </ion-view> 

the search bar show in header expected. how can search field 100% width across header? did try apply:

.buttons-left, .left-buttons{     width:100% !important; } 

it work. problem affect other pages well. tried add class , id ion-nav-buttons, doesn't shows up.

how can apply custom width ion-nav-buttons on specific page?

i not sure if best place put search field:

<ion-nav-buttons> 

you can define custom header specific view:

<ion-header-bar class="bar-positive">     <label class="item-input-wrapper">         <i class="icon ion-ios-search placeholder-icon"></i>         <input type="search" placeholder="search" class="search-bar">     </label>     <button class="button button-clear">cancel</button> </ion-header-bar> 

and use directive hide-nav-bar="true" in view tell current view hide navbar:

<ion-view view-title="home" hide-nav-bar="true">     ... </ion-view> 

this end result:

<ion-view view-title="home" hide-nav-bar="true">    <ion-header-bar class="bar-positive">     <label class="item-input-wrapper">       <i class="icon ion-ios-search placeholder-icon"></i>       <input type="search" placeholder="search" class="search-bar">     </label>     <button class="button button-clear">       cancel     </button>   </ion-header-bar>     <ion-content padding='true' scroll='false' has-footer='false'>      <div class="card">       <div class="item item-text-wrap">         home page       </div>     </div>    </ion-content>  </ion-view> 

i've used styling change result:

.search-bar {   width:100% !important;   background: inherit;   height: inherit !important; } 

and how looks in plunker.