Closed yudateNoriyuki closed 2 years ago
Thanks for reporting this issue. I am confused why you are manually setting the order
value on the button?
Comparing with the MD spec, this is the display for longer buttons:
and this is the display within Ionic, without modification:
In both examples, the confirmation button is on top and the cancel button is on the bottom. This behavior is consistent, regardless of which button is flex wrapping.
Can you help me understand where the issue is? Thanks!
@sean-perkins Thank you for contacting me.
I am confused why you are manually setting the order value on the button?
First of all, I tried it on iOS.
In iOS, the cancel button was on top. So I set the order value so that the cancel button is at the bottom.
order: 1
But when I did this on android, the order was reversed.
The reason for the reverse is that the flex-wrap value is different between IOS and android.
Thanks!
@yudateNoriyuki the button order is defined by the order of the array that you supply to the buttons
property. You should not be modifying this order with CSS.
const alert = await alertController.create({
...
buttons: [
'Agree',
'Disagree'
]
});
The example on the docs has them in the inverse order: https://github.com/ionic-team/ionic-docs/blob/main/static/demos/api/alert/index.html#L42.
I've confirmed if you supply the buttons in the desired order, no style customization is required.
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Prerequisites
Ionic Framework Version
Current Behavior
The order of the alert buttons on android is reversed from iOS.
RESULT
Android
iOS
CAUSE
It's because the value of flex-wrap is different between iOS and android
Android
flex-wrap:wrap-reverse
https://github.com/ionic-team/ionic-framework/blob/a26275378f10835343ad8a6cdea50303e6c10a14/core/src/components/alert/alert.md.vars.scss#L122iOS
flex-wrap: wrap
https://github.com/ionic-team/ionic-framework/blob/a26275378f10835343ad8a6cdea50303e6c10a14/core/src/components/alert/alert.ios.vars.scss#L128Expected Behavior
Should be in the same order as iOS.
Why is android the opposite? Even with the material guidelines, the cancel button is at the bottom, just like iOS. https://material.io/components/dialogs#anatomy
Steps to Reproduce
order:1
for the disagree buttonCode Reproduction URL
No response
Ionic Info
have nothing to do with
Additional Information
No response