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
Comments
Thanks for the issue! Are you using a custom cancel button? |
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. |
@rossholdway Anything in particular you're trying to do? You should be able to listen to the 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. |
Hi @brandyscarney, I have the same issue
|
Same issue here. By debugging I realize that the padding-top of ion-searchbar was removed, it is probably related to the issue. |
@brandyscarney Amazing. Thanks for the codepen. Didn't realise there was an
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). |
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. 🙂 |
As a workaround until the fix is in you can target them with this CSS:
This should mostly center them, still making sure it works properly. 🙂 |
This has been fixed in Thanks everyone! |
Please use the exact dev build I posted, other dev builds weren't made with the same branch. |
Actually, it was published with |
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 :( |
searchbar align with cancel button, but not with others items inside ion-toolbar |
a simple code, please check it |
The searchbar has to have 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. |
I know your mind but I think height and padding-bottom should not have important, it's make me impossible to custom my style ^^! |
Okay I found a way to move the CSS so that |
Can you try this dev build please: |
I'm really grateful for your helps ^_^ |
sample code |
The alignment of the search bar is still not optimal. Example: https://codepen.io/robingenz/pen/XWWdrRX Will this be fixed? |
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. |
Bug Report
Ionic version:
[x] 4.10.0
Current behavior:
Add an
ion-buttons
next to anion-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:
Other information:
I believe this is due to the addition of e27962d#diff-d7830cbb2e9f6ba7efe16e29aaac9c6b specifically the
padding-top: 1px !important;
.The text was updated successfully, but these errors were encountered: