Ionic 2 Modal is 50% of the width

Question

I have a page in my ionic application that when I click a button, a modal page opens. I am currently redefining the .scss variable to the code below so that the model covers 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 to all my models in my application. I want to use some models on other pages that use 50% of width and about 80% of height. How to customize my controls?

Answer 1

You cannot change a specific modal height or width. Now I will describe the solution that I use to resize my modal file.

• Make sure that all modal height and width should be 100%. Like ion resizing for large screen devices. This is 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 the ionic content we create two divs, and the background of the ionic content should be transparent (see main-view css class). Now one div is used for the modal background, this will be used as the background (see overlay css class). Another div should be used for content, we will resize this div (see modal-content css class). In the example, I resize to 50%. Sample html ans css code is 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 screenshot of the modal,

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

For Ionic3 you need 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 code is taken from here . I think this repo project will help you.