ionic-frameworkionic3css-positionmodalviewcontroller

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?

Solution

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