ionic-framework: bug: Buttons no longer align with ion-searchbar

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.

Screenshot 2019-09-30 at 17 35 10

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 https://github.com/ionic-team/ionic/commit/e27962dcaf98bfb1f4c026df5a8c525ee3773261#diff-d7830cbb2e9f6ba7efe16e29aaac9c6b specifically the padding-top: 1px !important;.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 23 (14 by maintainers)

Commits related to this issue

fix(searchbar): update padding and button alignment fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): update padding and button alignment fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): update padding and button alignment fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): update padding and button alignment (#19532) fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): align back button and other slotted content in toolbar fixes #19495 fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): update alignment of chips and other elements in toolbar (#19596) fixes #19495 fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago
fix(searchbar): update alignment of chips and other elements in toolbar (#19596) fixes #19495 fixes #19502 — committed to ionic-team/ionic-framework by brandyscarney 5 years ago

Most upvoted comments

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 on Oct 2, 2019

I’m really grateful for your helps ^_^

thiennm2905 on Oct 8, 2019

Can you try this dev build please: 4.11.0-dev.201910082331.57ee7eb

brandyscarney on Oct 8, 2019

Okay I found a way to move the CSS so that !important wouldn’t be needed and adjusted the styles for chip. I’m working on a dev build, ran into some issues.

brandyscarney on Oct 8, 2019

The searchbar has to have !important on it because it’s a scoped component, so that’s the way to make it override its default styles. This was done to match the iOS spec, see my comment here: https://github.com/ionic-team/ionic/issues/19502#issuecomment-537522707

We always align our components to match native. iOS doesn’t actually have the concept of chips, but I can add some styles to align it but it will be on the top.

brandyscarney on Oct 8, 2019

Please use the exact dev build I posted, other dev builds weren’t made with the same branch.

brandyscarney on Oct 8, 2019

This has been fixed in master, we’re planning a 4.10.1 release with this in it on Friday. In the meantime, please use this dev build if you need it sooner: 4.11.0-dev.201910021623.cdfd82a

Thanks everyone!

brandyscarney on Oct 2, 2019

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

brandyscarney on Oct 2, 2019

@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).

rossholdway on Oct 1, 2019

@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.

brandyscarney on Sep 30, 2019