Search code examples
cssangularionic-frameworksearchbar

Problem with ion-searchbar height and placeholder

I hope you are all well.

I have a problem with Ionic 5 - Angular , Searchbar.

I added the searchbar like this :

<ion-searchbar
          [(ngModel)]="text"
          (ionChange)="search()"
          placeholder="Search for cars"
          class="searchbarInput"
        ></ion-searchbar>

I am trying to change the height of the searchbar to have 48px and also the placeholder text to have 10px , but with no success.

I also tried to customize the class in the inspected element like search-input and also search-input-container with no success.

When i customize the css in Inspect Elements and add there styles it works but in my scss its not working.

I would really appreciate if someone can help me to solve this issue.

Thank you so much for your time.

Solution

  • <ion-searchbar> seems to work like this: <div><ion-input></ion-input></div>, so the height attribute affects the div element .You can try height:fit-content or max-content.