feat: iOS search bar in header styling support

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

While working with a member of the community, we discovered that there is a design oddity when placing an ion-searchbar inside an ion-toolbar inside an ion-header.

ion-searchbar will be given a padding-bottom: 15px; value when the ion-toolbar .sc-ion-searchbar-ios-h CSS selector is applied.

When given padding-bottom: 15px, the ion-searchbar does not vertically align correctly with other elements placed within the ion-toolbar.

Describe Preferred Solution

It might be beneficial to add styling that reduces the padding-bottom value of an ion-searchbar component when it’s placed inside an ion-toolbar inside of an ion-header, something to the effect of:

ion-header ion-toolbar .sc-ion-searchbar-ios-h {
  padding-bottom: // some better value
}

Describe Alternatives

It’s always possible to introduce a custom CSS class at the project level that overrides the padding-bottom value set by the framework. However, this design paradigm appears to be popular in the mobile world and might be worth supporting within the Ionic Framework.

Related Code

A repro has been built that showcases the issue. It can be found here: https://github.com/ehorodyski-ionic/ng-searchbar-in-header

The relevant portion of code to reproduce this issue is:

<ion-header [translucent]="false">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-searchbar></ion-searchbar>
    <ion-buttons slot="end">
      <ion-icon slot="icon-only" name="add-sharp"></ion-icon>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Additional Context

The screenshot below highlights the UX when running on an iOS simulator. Ideally, the ion-searchbar would be better vertically aligned with the other elements contained within the ion-toolbar.

[brandyscarney]

Thanks for the issue! This is actually by design to match the iOS spec. You can see where the numbers come from this photo (this was taken awhile ago of native):

Here are some examples of the searchbar natively by itself:

Safari search	App Store search

The buttons inside of a toolbar with a searchbar are aligned to the top with the searchbar. This is an unusual design for iOS though, as native apps don’t put anything else in a toolbar with a searchbar. We could revisit the padding on searchbar to make sure it still aligns with native, but when that decision was made it was compared and lined up. I believe this may be more of a documentation issue.

[dorontal]

+1

Had recently asked about this in the Forum, got no answer so I’m here.

My template is (it has no scss):

<ion-header>
    <ion-toolbar>
        <ion-buttons *ngIf="!showSearchbar" slot="start">
            <ion-menu-button></ion-menu-button>
        </ion-buttons>
        <ion-title *ngIf="!showSearchbar">Explore</ion-title>
        <ion-searchbar *ngIf="showSearchbar" showCancelButton="always"
                       [(ngModel)]="searchQuery"
                       (ionCancel)="showSearchbar = false"
                       (ionChange)="autocomplete()"
                       (keyup.enter)="search()"
                       placeholder="Search Tracktunes"></ion-searchbar>
        <ion-buttons slot="end">
            <ion-button *ngIf="!showSearchbar" (click)="showSearchbar = true">
                <ion-icon slot="icon-only" name="search"></ion-icon>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>

and the iPhone4 simulation looks like this:

NOTE: when I add the following to the page’s scss file, it has no effect (tried it because of the above comment):

.ios ion-header ion-toolbar {
    padding-top: 15px;
}