CODEWITHSUNDEEP
ionic-frameworkionic4
Lightbeard
Lightbeard

Reputation: 4131

Ionic V4: ion-modal just like ion-alert

The following ion-alert would be exactly what we need if the input was replaced with a textarea; however, ion-alert doesn't support ion-textarea.

How can the exact same look and feel be implemented with an ion-modal?

We are using Ionic without Angular (Ionic core).

ion-alert code

 const alert = await alertController.create({
   header: 'Would you be willing to leave feedback?',
   inputs: [
   {
     placeholder: 'enter text'
   }],
   buttons: [
     {
       text: 'Cancel',
       role: 'cancel',
       cssClass: 'secondary',
       handler: _ => {
         alert.dismiss();
         console.log('cancel');
       }
     }, {
       text: 'Submit',
       handler: _ => {
         alert.dismiss();
         console.log('submit');
       }
     }
   ]
 });
 alert.present();

ion-alert

attempted ion-modal code

const modalController = $('ion-modal-controller')[0];
await modalController.componentOnReady();

const modalElement = await modalController.create({
  showBackdrop: true,
  component:
    $(`<div>
          <h2>Would you be willing to provide feedback?</h2>

          <div>
            <ion-button>Cancel</ion-button>
            <ion-button>Submit</ion-button>
          </div>
      </div>`)[0]
});
await modalElement.present();

ion-modal

Upvotes: 2

Views: 2796

Answers (1)

Sem
Sem

Reputation: 1397

In the page where you call the modal:

async book() {
   const modal = await this.modalController.create({
	component: BookModal,
	componentProps: { value: 123 },
	showBackdrop: true,
	backdropDismiss: true,
	cssClass: ['booking-modal']
   });
   return await modal.present();
}

The key point is the cssClass. Then in theme/variable.scss, add the class at the end of the file like below:

.booking-modal {
	--height: 50% !important;
}

** Note: this might not be the correct way to do it, but it works for me at this stage. Looking for a better solution.

Upvotes: 2

Related Questions