Ion-Archbar icon on the right

Asked

Viewed 253 times

0

It looks simple but I haven’t found anything. How can I paste the icon on the right side >>>> and the search bar on the left side <<< ? 

   <ion-searchbar placeholder="Buscar" [(ngModel)]="queryText" 
   (ionInput)="filterProduto($event)" clearInput class="search">
   </ion-searchbar>

scss

    .search{

    position: fixed;
    box-shadow: none !important;
    left: 45%;
    top: 1%;  
    text-align: right;

    .searchbar-search-icon {
        background-image: url("../assets/imgs/ico_busca.svg")!important;
        width: 40px;  

      }

img

ionic

1 answer

0


Really very simple... I just added left to the scss icon

.search{

    position: fixed;
    box-shadow: none !important;
    left: 45%;
    top: 1%;  
    background: transparent;
    max-width: 160px;

    .searchbar-search-icon {
        background-image: url("../assets/imgs/ico_busca.svg")!important;
        width: 30px;  
        left: 90px;
      }

}

Browser other questions tagged ionic

You are not signed in. Login or sign up in order to post.