How to update the height of ion-searchbar in Ionic 4?

Issue

I am trying to develop a search functionality in Ionic 4 with <ion-searchbar>. The problem I have is with the height of the search bar, I can't manipulate it. I know Ionic 4 is web component based and it wraps every component inside a shadow DOM but <ion-searchbar> doesn't seem to have a shadow DOM as can be seen below:

Unlike other components where shadow DOM is visible within the nodes like this one:

This makes me think that I can override the div with class searchbar-input-container within the <ion-searchbar> but I can't and even Ionic official documentation doesn't cover any property or variable with which this can be attained. Please help.

Solution

After much of trouble, I tried with a solution which can be considered as a workaround too by some people. I used transform: scale of CSS to scale my <ion-searchbar>. So the code now becomes:

ion-searchbar {        
    transform: scale(1.2); // Can also scale individually with scaleX() and scaleY()
    margin: 0 auto;
    width: 80%; // To avoid pixelate effect that occurs with scaling
}

You can also use zoom CSS property as zoom: 1.2 but as per MDN docs, it is recommended to use transform over zoom.

This allows us to increase the height without accessing the div with class searchbar-input-container.

Answered By - patrick.1729