[SOLVED] Is it possible to display the default Ionic searchbar on iOS the same way as on Android?

Ionic Framework Ionic Angular
1

Greetings, I am currently working on an app using Ionic v5 and came across the following problem:

The default searchbar of Ionic is displayed in Android like this:

image

while on iOS, it is displayed like this:

image

which is usually not that bad, but I’m building an app with a map in its center and the searchbar on top, which means having an almost transparent searchbar isn’t a good user experience.

Now I know there are some core design differences between android and iOS, but there has to be a way to force the Android design onto iOS.

Thank you in advance

2

Yes you can. You can force md class on the elements/theme

Haven’t done it. Check the theming docs. I have seen it there

3

On (i think) every Ionic component you can force the mode of a component by setting mode="md" or mode="ios".

But that is not what i would use here, i would first inspect why the Searchbar is transparent and then check if you can fix this via styling and css Variables, to keep all the specs that are ion native like

2 Likes