CODEWITHSUNDEEP
ionic-frameworkionic3css-positionmodalviewcontroller
Murilo
Murilo

Reputation: 173

Ionic 3 - I want a modal screen not full size

I need a modal page with no full size (80% width, <60% height, centered) to select some items, like an alert control. How to implement the CSS for this case?

Upvotes: 8

Views: 11065

Answers (5)

Wellington Alves
Wellington Alves

Reputation: 89

I'm on Ionic 6 and it worked here. Add in global.scss:

.premio-modal{
  // background-color: red;
  .modal-wrapper{
    background: rgba(0, 0, 0, 0.5) !important;
    /* padding: 20% 10% !important; */
    width: 70%;
    height: 75%;
    border-radius: 5px;
  }
}

In component:

async showModal(){
        const modal = await this.modalController.create({
          component: YourComponent,
          cssClass: 'premio-modal',
          backdropDismiss: true,
          
        });
        modal.onDidDismiss().then(
          (m: any) => {
          }
        );
        return await modal.present();
      }

Upvotes: 1

SohanLal Saini
SohanLal Saini

Reputation: 458

Assign a class to modal (ionic-4 & ionic-5)

this.modalCtrl
  .create({
    component: ReportEventComponent,
    cssClass: 'add-contact-modal'
  })
  .then(modalEl => {
    modalEl.present();
    return modalEl.onDidDismiss();
});

put your css code into global.css file

ion-modal.add-contact-modal {
  --height: 85%;
  --width: 90%;
}

Upvotes: 1

Shravan
Shravan

Reputation: 309

in TS file:

  async MyModal() {
    const modal = await this.modalController.create({
      component: MyModalPage,
      backdropDismiss: true,
      cssClass: 'my-modal',
    });
    return await modal.present();
  }

in SCSS file:

.my-modal {
  --width: 70%;
  --height: 35%;
}

Upvotes: 1

Shashwat Gupta
Shashwat Gupta

Reputation: 5264

put this code only in your component css file

::ng-deep .sc-ion-modal-md-h {
--width: 90%;
--height: 70%;
  }

Upvotes: 1

Swapnil Patwa
Swapnil Patwa

Reputation: 4099

Initialize modal with cssClass

 let modal = this.modalCtrl.create(CustomSelectPage, {data: data}, {cssClass: 'select-modal' });

Then add CSS to the class in app.scss

.select-modal {
   background: rgba(0, 0, 0, 0.5) !important;
   padding: 20% 10%  !important;
}

Change the numbers according to your design.

Upvotes: 21

Related Questions