bug: The order of the alert buttons on android is reversed

[yudateNoriyuki]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [X] v4.x
• [X] v5.x
• [X] v6.x
• [x] Nightly

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#L122

iOS

flex-wrap: wrap https://github.com/ionic-team/ionic-framework/blob/a26275378f10835343ad8a6cdea50303e6c10a14/core/src/components/alert/alert.ios.vars.scss#L128

Expected 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

1. Make the alert button name longer so that flex-wrap will work
2. Set order:1 for the disagree button

Code Reproduction URL

No response

Ionic Info

have nothing to do with

Additional Information

No response

[sean-perkins]

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!

[yudateNoriyuki]

@sean-perkins Thank you for contacting me.

I am confused why you are manually setting the order value on the button?

1

First of all, I tried it on iOS.

2

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

3

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!

[sean-perkins]

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

[ionitron-bot[bot]]

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.