Ionic 3: Position modal window to bottom right of the screen

user_216624 0
Viewed 6000

I've tried everything, don't get it.

Just want to fix the modal popup window to the bottom right corner of the screen, that's it.

This is how I'm showing my modal:

let modal = this._ModalController.create(MyPage, { group: group }, {cssClass: 'custom-modal' });
modal.present();

And I was trying css, but with no luck:

.custom-modal {
  .modal-wrapper {
    position: absolute !important;
    bottom: 0px;
    right: 0px;
  }
}
ionic2 ionic3 ionic-framework css-position modal-dialog
3 Answers

Fixed it with:

@media only screen and (min-height: 600px) and (min-width: 768px)
{
  .custom-modal {
    .modal-wrapper {
      position: absolute;
      width: 766px !important;
      height: 500px !important;
      top: calc(100% - (500px));
      left: calc(100% - (766px)) !important;
    }
  }
}
user_2166240

I have done some trick to deal with modal size n all.

First of all put this css into app.scss

modal-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  @media not all and (min-height: 600px) and (min-width: 768px) {
    ion-modal ion-backdrop {
      visibility: hidden;
    }
  }

  @media only screen and (min-height: 0px) and (min-width: 0px) {
    .modal-wrapper {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

then in your modal page scss you can play with your modal design

this is how i did.

testpage.html

<ion-content class="main-view" scrollY="true">
  <div class="overlay"></div>

  <div class="modal_content">

    <ion-header>

      <ion-navbar>

        <ion-title>Test</ion-title>
        <ion-buttons end>
          <button ion-button (click)="closeModal()">Close</button>
        </ion-buttons>
      </ion-navbar>

    </ion-header>

  </div>
</ion-content>

and here is magic works with testPage.scss

test-modal {

        .main-view{
          background: transparent;
        }
        .overlay {
          position: fixed;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: .5;
          background-color: #333;
        }
        .modal_content {
          position: absolute;
          top: calc(50% - (65%/2));
          left: 0;
          right: 0;
          width: 90%;
          // height: 80%;
          padding: 10px;
          z-index: 100;
          margin: 0 auto;
          padding: 10px;
          color: #333;
          background: #e8e8e8;
          background: -moz-linear-gradient(top, #fff 0%, #e8e8e8 100%);
          background: -webkit-linear-gradient(top, #fff 0%, #e8e8e8 100%);
          background: linear-gradient(to bottom, #fff 0%, #e8e8e8 100%);
          border-radius: 5px;
          box-shadow: 0 2px 3px rgba(51, 51, 51, .35);
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          overflow: hidden;
        }

}
user_46155400
user_13833560
Related