feat: iOS search bar in header styling support

[eric-horodyski]

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.

[daveshirman]

For what it's worth, I think the screenshot use-case you show here doesn't match what @brandyscarney is comparing it to. I thought the same as you, so did a dirty hack and whammed in a div with 15px padding, e.g.

<div class="spacer-searchbar-nav"></div>
<ion-searchbar       
    mode="ios"
    [(ngModel)]="query" 
    debounce="{{_ConfigurationService.searchDebounce}}" 
    [placeholder]="placeholderValue" 
    (ionChange)="search()" 
    showCancelButton="never">
</ion-searchbar>

css

.spacer-searchbar-nav {
  display: block;
  height: 15px;
  background-color: transparent;
}

[brandyscarney]

Why not just add more padding top? https://codepen.io/brandyscarney/pen/KKVdvLv

[daveshirman]

Why not just add more padding top? https://codepen.io/brandyscarney/pen/KKVdvLv

Because this way I could easily remove it from the DOM based on an *ngIf - based on the platform it was running on.

Simple, quick fix that doesn't mess with the Ionic styles themselves and cause more trouble.

[brandyscarney]

@daveshirman Ah, in that case you could always use the .ios class to target only the ios mode, like the following:

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

This is our recommended way of adding custom styles based on the platform, see our theming docs: https://ionicframework.com/docs/theming/platform-styles#overriding-mode-styles

I updated the Codepen linked above to show this.

[daveshirman]

@daveshirman Ah, in that case you could always use the .ios class to target only the ios mode, like the following:

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

This is our recommended way of adding custom styles based on the platform, see our theming docs: https://ionicframework.com/docs/theming/platform-styles#overriding-mode-styles

I updated the Codepen linked above to show this.

I didn't say I was just restricting it based on iOS though...

[brandyscarney]

@daveshirman Yeah that would be the way to style based on the mode. Since those are the two design styles I assumed you were going between ios and md mode. But if you really want to style based on say, iphone or ipad, there are also classes added that you can target. For each platform, a class exists on html:

plt-ipad
plt-iphone
plt-ios
plt-android
plt-phablet
plt-tablet
plt-cordova
plt-capacitor
plt-electron
plt-pwa
plt-mobile
plt-mobileweb
plt-desktop
plt-hybrid

[uncvrd]

Why not just add more padding top? https://codepen.io/brandyscarney/pen/KKVdvLv

Hi @brandyscarney quick question! It appears adding padding to the ios component as you've linked here doesn't change anything unless I'm misunderstanding something? Here's what I see from your codepen:

Is this maybe a result of shadow root blocking access to the element selector now? I thought it was odd how the search bar is basically touching the browser header which is how I came across this issue! (I'm using the latest Ionic React). Here's what I see in my personal app even after adding the css you mentioned in to my theme.css:

[simb]

@brandyscarney is that first screenshot in the above comment really how this is supposed to look?

https://github.com/ionic-team/ionic-framework/issues/21455#issuecomment-667481321

When you made your explication above it seemed to make sense but I am seeing this differing layout between ios and md and it seems odd that the search bar is pinned to the top of the space.

[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;
}

[dorontal]

Playing around with the CSS, here's a workaround that worked for me, for now:

.ios ion-searchbar {
    padding-bottom: 1px;
}

which results in

[reslear]

same issue:

bug	hotfix

 <ion-searchbar class="ion-no-padding !pb-0" />