How to Create Custom Styling in Ionic Modal
In this blog, we will discuss how to create custom styling in Ionic Modal. Please read the blog to understand the custom styling modal in Ionic.
To add a modal in ionic we need to create a page and then we have to use the page as a modal in the required page and then we need to style the modal. Please go through the following steps below.
Step 1:
When we have one modal or the design of the modals is the same in the whole web application, then we can style the modal like this.
By Adding this in to global.scss:
.modal-wrapper.sc-ion-modal-md {
width: 400px;
max-width: 100%;
margin: 0px 15px;
border-radius: 12px;
box-shadow: 0px 0px 20px #8b8b8b;
height: 90vh;
}
Step 2:
But the problem is when we have different modals with different height / with maybe different design also, then we need to do the following steps:
First: add a class name within the modal property in modal-parent.page.ts:
async openMyModal(){
const modal = await this.modalController.create({
component: MyModalPage,
backdropDismiss: true,
cssClass: 'options_modal',
componentProps:{}
});
return await modal.present();
}
Second: add style in global.scss:
.my_modal_style.modal-wrapper.sc-ion-modal-md {
width: 400px;
max-width: 100%;
margin: 0px 15px;
border-radius: 12px;
box-shadow: 0px 0px 20px #8b8b8b;
height: 50vh;
}
You can change the height and width according to screen size using media query in global.scss file.
To design different modes, we have to declare different CSS, Class and then we can change its style separately.
Output:
In the case of the full-page modal, we need to change the style in global.scss.
.options_modal .modal-wrapper.sc-ion-modal-md {
width: 100vh;
margin: 0px;
border-radius: 0px;
height: 100vh;
}
Output:
This is How we can create custom styling in the Ionic modal.
Conclusion:
This is very important in Ionic Mobile app development. Please share your reviews in the comment section. See you on my next blog.
