Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug: Buttons no longer align with ion-searchbar #19502

Closed
rossholdway opened this issue Sep 30, 2019 · 23 comments · Fixed by #19532 or #19596

Comments

@rossholdway
Copy link
Contributor

commented Sep 30, 2019

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 e27962d#diff-d7830cbb2e9f6ba7efe16e29aaac9c6b specifically the padding-top: 1px !important;.

@ionitron-bot ionitron-bot bot added the triage label Sep 30, 2019
@brandyscarney

This comment has been minimized.

Copy link
Member

commented Sep 30, 2019

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

@rossholdway

This comment has been minimized.

Copy link
Contributor Author

commented Sep 30, 2019

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

This comment has been minimized.

Copy link
Member

commented Sep 30, 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.

@Anthony2539

This comment has been minimized.

Copy link

commented Oct 1, 2019

Hi @brandyscarney,

I have the same issue

image
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

This comment has been minimized.

Copy link

commented Oct 1, 2019

Same issue here.

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

@rossholdway

This comment has been minimized.

Copy link
Contributor Author

commented Oct 1, 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).

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Oct 2, 2019

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:

Screen Shot 2019-10-02 at 10 25 35 AM

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

IMG_8140
IMG_8141

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

@brandyscarney

This comment has been minimized.

Copy link
Member

commented 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 brandyscarney self-assigned this Oct 2, 2019
@ionitron-bot ionitron-bot bot removed triage labels Oct 2, 2019
@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Oct 2, 2019
@brandyscarney brandyscarney moved this from Backlog 🤖 to In progress 🤺 in Ionic Core Oct 2, 2019
brandyscarney added a commit that referenced this issue Oct 2, 2019
brandyscarney added a commit that referenced this issue Oct 2, 2019
brandyscarney added a commit that referenced this issue Oct 2, 2019
Ionic Core automation moved this from In progress 🤺 to Done 🎉 Oct 2, 2019
brandyscarney added a commit that referenced this issue Oct 2, 2019
fixes #19502
@brandyscarney

This comment has been minimized.

Copy link
Member

commented Oct 2, 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!

@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

still occur on 4.11.0-dev.201910081329.02c1724
Screen Shot 2019-10-09 at 05 00 54

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Oct 8, 2019

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

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Oct 8, 2019

Actually, it was published with 4.10.1: https://ionicframework.com/docs/release-notes#4.10.1

@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

I just use version 4.10.2 before try to use dev version, and I dont know why you fixed height and padding with important :(

@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

searchbar align with cancel button, but not with others items inside ion-toolbar

@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

a simple code, please check it
<ion-header> <ion-toolbar> <ion-chip [outline]="true" color="app" slot="start" (click)="picker.open()"> <ion-datetime #picker [(ngModel)]="pickedDate" (ngModelChange)="pickDate()" displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" cancelText="thoát" doneText="chọn" style="display: none;"></ion-datetime> {{pickedDate | date:'dd/MM/yyyy'}} </ion-chip> <ion-searchbar placeholder="nhập tên, sđt" [(ngModel)]="keyword" (ngModelChange)="search()"></ion-searchbar> <ion-buttons slot="end"> <ion-button (click)="clearData()" size="small"> <ion-icon color="danger" slot="icon-only" size="small" name="trash"></ion-icon> </ion-button> <ion-button (click)="updateData()" size="small"> <ion-icon slot="icon-only" name="refresh" size="small"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-header>

@brandyscarney

This comment has been minimized.

Copy link
Member

commented 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: #19502 (comment)

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.

@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

I know your mind but I think height and padding-bottom should not have important, it's make me impossible to custom my style ^^!
thanks for your helps

@brandyscarney

This comment has been minimized.

Copy link
Member

commented 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

This comment has been minimized.

Copy link
Member

commented Oct 8, 2019

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

brandyscarney added a commit that referenced this issue Oct 8, 2019
…ar (#19596)

fixes #19495 fixes #19502
@thiennm2905

This comment has been minimized.

Copy link

commented Oct 8, 2019

I'm really grateful for your helps ^_^

liamdebeasi added a commit that referenced this issue Oct 9, 2019
@thiennm2905

This comment has been minimized.

Copy link

commented Oct 10, 2019

sample code
<ion-header> <ion-toolbar> <ion-chip [outline]="true" color="app" slot="start" (click)="picker.open()"> <ion-datetime #picker [(ngModel)]="pickedDate" (ngModelChange)="pickDate()" displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" cancelText="thoát" doneText="chọn" style="display: none;"></ion-datetime> {{pickedDate | date:'dd/MM/yyyy'}} </ion-chip> <ion-searchbar placeholder="nhập tên, sđt" [(ngModel)]="keyword" (ngModelChange)="search()" showCancelButton="always"></ion-searchbar> <ion-buttons slot="end"> <ion-button (click)="clearData()" size="small"> <ion-icon color="danger" slot="icon-only" size="small" name="trash"></ion-icon> </ion-button> <ion-button (click)="updateData()" size="small"> <ion-icon slot="icon-only" name="refresh" size="small"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar> </ion-header> <ion-toolbar> <ion-chip [outline]="true" color="app" slot="start" (click)="picker.open()"> <ion-datetime #picker [(ngModel)]="pickedDate" (ngModelChange)="pickDate()" displayFormat="DD-MM-YYYY" pickerFormat="DD-MM-YYYY" cancelText="thoát" doneText="chọn" style="display: none;"></ion-datetime> {{pickedDate | date:'dd/MM/yyyy'}} </ion-chip> <ion-searchbar placeholder="nhập tên, sđt" [(ngModel)]="keyword" (ngModelChange)="search()"></ion-searchbar> <ion-buttons slot="end"> <ion-button (click)="clearData()" size="small"> <ion-icon color="danger" slot="icon-only" size="small" name="trash"></ion-icon> </ion-button> <ion-button (click)="updateData()" size="small"> <ion-icon slot="icon-only" name="refresh" size="small"></ion-icon> </ion-button> </ion-buttons> </ion-toolbar>
Screen Shot 2019-10-10 at 11 58 30
Screen Shot 2019-10-10 at 11 59 46
Screen Shot 2019-10-10 at 12 00 14
@brandyscarney

@robingenz

This comment has been minimized.

Copy link
Contributor

commented Oct 14, 2019

The alignment of the search bar is still not optimal.
image

Example: https://codepen.io/robingenz/pen/XWWdrRX

Will this be fixed?

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Oct 14, 2019

Please create a new issue if you are still running into a bug. The original issue has been resolved so I am going to lock this.

As I mentioned above the padding on the searchbar matches the iOS spec and is correct. It will not be changed. Please use custom padding in your app if you want it to look different.

@ionic-team ionic-team locked as off topic and limited conversation to collaborators Oct 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Ionic Core
  
Done 🎉
6 participants
You can’t perform that action at this time.