Search bar in header is not vertically centered on iOS

Using Ionic version 6.17.0, with this template code:

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-searchbar type="text" color="light"
                       placeholder="Search for titles or users ..." clearInput>
        </ion-searchbar>
    </ion-toolbar>
</ion-header>

it looks just perfect on Android - the search bar and the menu button are perfectly vertically aligned at the center of the header’s toolbar.

But on iOS, both the menu button and the ion-searchbar are not vertically centered in the header but instead appear flush against the top of the screen, is this a bug?

Regardless, has anyone found a workaround for this by any chance?

Thanks!

1 post - 1 participant

Read full topic