bug: setting ion-modal width or height CSS properties to auto results in size of 0

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

According to Ionic documentations, when creating an alert with complex form, we should use a modal instead

If you require a complex form UI which doesn’t fit within the guidelines of an alert then we recommend building the form within a modal instead.

I’m trying to create a simple alert which prompt the user to confirm his password before validating critical actions, but I can’t add form validations on a <ion-alert>, so I switched to a <ion-modal> on which I try to replicate the design of an <ion-alert> using CSS properties (–width, --height, …) so the modal doesn’t take the entire app’s viewport but appears floating on top of the current page, but setting them completely break the modal, which I don’t think is expected

Expected Behavior

Using the CSS properties defined by Ionic: --width, --height, --min-width, --min-height, --max-width & --max-height, I should be able to create a floating modal on top of the current content

If the <ion-modal> isn’t expected to be used to create floating modal, then all these CSS properties as well as --backdrop-opacity, --border-radius & --box-shadow are useless

Steps to Reproduce

Inside the component which create the modal:

const modal = await this.modalController.create({
  component: ConfirmPasswordModalComponent,
  cssClass: 'confirm-password-modal',
});
await modal.present();

Inside the global.scss file:

.confirm-password-modal {
  --width: auto;
  --height: auto;
  --min-width: 280px;
  --max-width: 320px;
  --min-height: auto;
  --max-height: 90%;
  --overflow: auto;
  --border-radius: 4px;
  --box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);

  .modal-wrapper {
    margin: 12px;
  }
}

Code Reproduction URL

No response

Ionic Info

@ionic/angular: 5.8.4 @ionic/cli: 6.17.1 @angular/cli: 12.2.10 @capacitor/cli: 3.2.5 NodeJS: 16.11.1 npm: 8.0.0

Additional Information

Here is a video demonstrating the issue on Firefox & Chrome and what the problem is:

https://youtu.be/JvJQbTfKsrw

As you can see I’m able to fix the issue doing some manipulations on the Component inside the .ion-wrapper:

On Firefox, adding these CSS rules display: block; & position: static; is enought to fix the problem, but on Chrome I also have to add the rule contain: initial;

A quicker fix would be to be able to remove the ion-page class that is automagically added to my Component, as all the 3 CSS rules I added are here to override the ones defined by .ion-page

I opened this as a bug as the ion-page class makes it impossible to resize the modal using the CSS properties defined by the <ion-modal> without overriding the .ion-page CSS rules, but it can also be seen as a feature request, by adding an option to control whether or not we want the ion-page class to be automagically added to our component, for example, when creating the modal:

const modal = await this.modalController.create({
  component: ConfirmPasswordModalComponent,
  cssClass: 'confirm-password-modal',
  componentClass: '', // Defaults to 'ion-page' but can be overrided with whatever we want
});
await modal.present();

[amandaejohnston]

Hi, I’ve dug into this and confirmed that the ion-modal implementation could be improved here. The issue is that setting --width and/or --height to auto leads to a size of 0px. Your code has a defined min-width, but min-height is also set to auto, so the modal’s size is 280px by 0.

It looks like the cause is that both the outer ion-modal and inner .ion-page are absolutely positioned, which messes with the height calculation.

In the meantime, another possible workaround would be to set --min-height to something besides auto, though I acknowledge this isn’t perfect since the modal wouldn’t just fit its content.

[Julien-Marcou]

I can confirm that it fixes the issue 🚀