Custom modal with Ionic 3.5.3

Ionic Framework ionic-v3
1

Hi there, I am trying to craft a modal that does not take the full screen. I went through most of the options in Custom modal / alert (with HTML, form...) and none of them seem to be working for me. Can someone post working code? I tried creating my own “.modal-wrapper” or overriding “modal” in my home.ts scss - none of them seemed to affect the modal

Here is what I have so far (after trying several options in the above thread)

home.ts

let im = this.modal.create(AlertModalPage, {}, {cssClass:"mymodal"});
im.present();

home.scss

page-home {
    .mymodal{
    position: absolute !important;
    width: 90% !important;
    height: 65% !important; 
    top: 20% !important;
    left: 5% !important;
  }
}

AlertModalPage is a stock generated empty page

1 Like
2

Is the modal with the class mymodal actually created under the <page-home> component? Use your browser’s dev tools to find out.

2 Likes
3

Good gosh, you are right. I naively assumed that since I am instantiating the modal inside home.ts, it would be under home.scss style def. It’s not. Moving mymodal to app.scss worked. Which brings me to my next question - is a global style the only way? I really want all of this to be scoped inside a single component (styles included)

Side note on checking using dev tools:
I wish I could. I am limited to using Dev Tools of safari (my code needs to run on an iOS device) and for some reason, it only occasionally shows inspectable apps on my device and when it does, the element view is completely blank :frowning: (I am not using --prod or any income optimizations either that trigger prod mode)

1 Like
4

Yes. In the DOM, modals live outside of page components.

2 Likes