bug: Buttons no longer align with ion-searchbar

[rossholdway]

Bug Report

Ionic version:

[x] 4.10.0

Current behavior:
Add an ion-buttons next to an ion-searchbar component within a toolbar. On iOS they no longer align in v4.10.0. Unless there is a different way to align buttons next to a ion-searchbar that I am unaware of I believe this is a bug?

Expected behavior:
I'd expect buttons within ion-buttons to align with the searchbar on iOS.

Steps to reproduce:

Related code:

<ion-header>
  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button (click)="goBack()">
        Cancel
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

Other information:
I believe this is due to the addition of e27962d#diff-d7830cbb2e9f6ba7efe16e29aaac9c6b specifically the padding-top: 1px !important;.

[brandyscarney]

Thanks for the issue! Are you using a custom cancel button?

[rossholdway]

Hi @brandyscarney

Yes, I am using a custom button because I need it to call a function on tap. I believe the button that’s provided by the ion-searchbar doesn’t allow me to do this.

[brandyscarney]

@rossholdway Anything in particular you're trying to do? You should be able to listen to the ionCancel event and change the visibility of it that way. Here's a sample Codepen: https://codepen.io/brandyscarney/pen/PoYrJNK?editors=1111

We can fix the alignment of buttons next to the toolbar but they will but up higher by the searchbar since this is updated to match the iOS spec.

[Anthony2539]

Hi @brandyscarney,

I have the same issue

Related Code:
<ion-header> <ion-toolbar> <ion-buttons slot="start"> <ion-back-button text=""></ion-back-button> </ion-buttons> <ion-searchbar #autofocus debounce="500" color="primary" placeholder="Rechercher un vin" (ionChange)="search($event)"></ion-searchbar> <ion-buttons slot="end"> <ion-button (click)="showFilterChoice()" color="primary" fill="outline">Filtres</ion-button> </ion-buttons> </ion-toolbar> </ion-header>

[mateusduraes]

Same issue here.

By debugging I realize that the padding-top of ion-searchbar was removed, it is probably related to the issue.

[rossholdway]

@brandyscarney Amazing. Thanks for the codepen. Didn't realise there was an ionCancel event available for the built in ion-searchbar button. Eveything aligns for me now.

<ion-header>
  <ion-toolbar>
    <ion-searchbar show-cancel-button="always" (ionCancel)="goBack()"></ion-searchbar>
  </ion-toolbar>
</ion-header>

I guess it might be worth looking into a CSS fix for custom buttons e.g. in Anthony2539's example above he has two buttons to align in the toolbar (back and filters).

[brandyscarney]

Thanks for the feedback! So like I said, we can update the buttons so that they are aligned with the searchbar but this will put them closer to the top. This is due to the iOS spec which normally does not include buttons by a searchbar. Here's a picture of the spec to see where the numbers come from:

And here are some examples of the searchbar in a toolbar by itself:

I'll look into a fix for the buttons. 🙂

[brandyscarney]

As a workaround until the fix is in you can target them with this CSS:

ion-buttons {
  align-self: start;
}

This should mostly center them, still making sure it works properly. 🙂

https://codepen.io/brandyscarney/pen/WNeVJGw