html - Ionic - Can't center align ion-search bar in header -
i'm having lot of trouble centering ion-searchbar in navigation bar. i've tried text-align , ion-grids, nothing seems work. has component.
index.html
<ion-header> <ion-navbar> <ion-toolbar> <button class="home-menu" ion-button menutoggle> <ion-icon name="menu"></ion-icon> </button> </ion-toolbar> <ion-title> <h1>title here</h1> </ion-title> <ion-searchbar class="search" [showcancelbutton]="shouldshowcancel" (ioncancel)="oncancel($event)"> </ion-searchbar> </ion-navbar>
index.scss
page-index { ion-searchbar { width: 60 % ; text-align: center !important; } }
try this
page-index { ion-searchbar { width: 60%; margin: 0 auto; } }
Comments
Post a Comment