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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.