Ionic 2 Modal make 50% of the width

Question

I have a page in my ionic application that on button click opens a Modal Page. Currently, I have override the variable.scss to the code below to make the model cover the 100% of the page.

//for Modals
$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

However, this applies for all my models in my application. I want to use some models in other pages that use the 50% of the width and around 80% of the height. How can I customize my controls?

Answer 1

You can not change a particular modal height or width. Now, I will describe an solution which I use to resize my modal.

1. Ensured that all modal height and width should be 100%. As ionic resize modal for large screen devices. That's why I added below code in 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%;
  }
}

2. Now In ion-content we make two div and the background of ion-content should be transparent (see main-view css class). Now, One div is used for background of the modal, this will use as backdrop (see overlay css class). Another div should be used for the content, we will resize this div (see modal-content css class).In example I resize the height to 50%. Sample html ans css code is given below,

page-about {
  .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% - (50%/2));
    left: 0;
    right: 0;
    width: 100%;
    height: 50%;
    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;
  }
}

<ion-content class="main-view">
  <div class="overlay" (click)="dismiss()"></div>
  <div class="modal_content">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs, update any existing page or create new
      pages.
    </p>
  </div>
</ion-content>

Here is a screen shot of the modal,

If you want modal content should scroll then replace <div class="modal_content"> with <ion-scroll class="modal_content" scrollY="true"> as told by Missak Boyajian in comment

For Ionic3 you need to this comment from Alston Sahyun Kim.

this is an excellent answer, just one thing from ionic3, .main-view{ background: transparent; } should be .content{ background: transparent; }

All the code is taken from here. I think this project repo will help you.

Answer 2

I tried before but had not found a generic way to make modals behave the way as I desired.

So I strugled a bit and achieved responsive modals and other kinds of modals with the following global scss:

ion-modal {
    &.my-modal-inner {
        display: flex;
        align-items: center;
        justify-content: center;

        ion-backdrop {
            visibility: visible;
        }

        .modal-wrapper {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            overflow: auto;
            width: auto;
            height: auto;
            left: auto;
            top: auto;
            contain: content;

            max-width: 70%;
            max-height: 70%;

            border-radius: 2px;
            box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);

            > .ion-page {
                position: relative;
                display: block;
                width: auto;
                height: auto;
                contain: content;
                box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
            }
        }

        &.my-stretch {
            .modal-wrapper {
                overflow: hidden;
                width: 100%;
                height: 100%;

                > .ion-page {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    &.my-fullscreen {
        .modal-wrapper {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }   
}

You can have responsive modals that will have the size of the inner content using cssClass: 'my-modal-inner':

The modal will occupy at maximum 70% of the width and height (like defined in the above css) when the content surpasses the limit:

If the content of the modal is supposed to occupy all the container element (like a page or a component with ion-content), it will not work well with the above case because the modal supposes that the container should have the size of its children, causing a possibly undesired behaviour (the modal will be very small, more than it should):

Instead, you can define the modal to occupy its maximum size with cssClass: 'my-modal-inner my-stretch':

If you want the modal to be full screen, even in a large desktop browser, you can use cssClass: 'my-fullscreen':

Notes:

1. You can change the prefix my- with any other prefix of your choice (or no prefix).
2. You can change the maximum width and height of the modal in the above css, as you seem fit (I defined both as 70%, in your case it would be 50% and 80% for the width and height, respectively).
3. The above screenshots were taken in a desktop browser, but the modal changes also work in a mobile/native app with Ionic (I tested in Android, and it should work in iOS too).

Update (2018-07-30)

About the HTML codes for the modal:

1) Responsive modal that will be as large or as small as the inner content (a single div or a hierarchy of divs, spans and other block and inline elements should do):

<div class="main">
    <div class="img-container">
        <img src="assets/img/main/icon.png" [alt]="APP_NAME">
    </div>
    <div class="info-container">
        <div class="app-name">{{ APP_NAME }}</div>
        <div class="app-version">Version {{ APP_VERSION }}</div>
        <div class="app-year">@{{ INITIAL_YEAR }}-{{ CURRENT_YEAR }} {{ APP_NAME }}</div>
        <div class="app-rights">All rights reserved</div>
    </div>
</div>

2) Modal will occupies its maximum size (use class my-stretch). In this case, any ionic page will do:

<ion-header>
    <ion-navbar>
        <ion-title>My Title</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <p> My content </p>
</ion-content>