Beta 7 Inset Modals are not the new Alert (or ionic1 Popup)

Ionic Framework ionic-v3
1

So I am setup in beta7 and it seems that in beta7 modals only inset on larger devices.

image

What I was hoping was to be able to use an inset Modal on all devices because all I need is a small custom screen to fit content which doesn’t need to be full page/modal size but requires HTML code to implement.

All I require is something similar to ionic1’s Popup because, unlike ionic2’s Alert, it can take a template as input rather than a string message.

Has anyone implemented something like:

but that is:

  • responsive in all device dimensions,
  • max height fits content regardless of size of content (e.g if content is 100px then the dialogue is 100px with no excess space);
  • is centered on the screen with a backdrop?
1 Like
2

OK I was able to get my modal as desired using the following CSS, using !important as a safeguard to ensure they aren’t overridden by the ionic2 modal (inset) css depending on whether it’s a smaller or larger device:

.modal-wrapper{
  position:absolute !important;
  width:90vw !important;
  height:260px !important;
  top:0 !important; 
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: auto !important;
}

.modal .backdrop{
  display:block !important;
}

The height is the height of my particular div to ensure there is no excess space. The top, bottom, left, right and margin auto settings ensure it’s centered on the page. The width=90vw ensures 5 viewport-widths of margin either side and thus responsive for different devices.

3

The problem with this solution is that it works for all modes of the application. I would like to do this for just one.

There is solution for this?

4

Yes. If you look at the generated css in chrome developer you will see that in all betas excluding 7 that a css class corresponding to the name of the modal page is present (e.g if your modal page is mymodal.html then you will find a css class named mymodal). You can then use this in your css scoping to apply different styles to different modals.

Note that I’ve since discovered that the !important is not necessary because user defined css always supersedes ionic defined css.

1 Like
5

I struggled with this too and came with a solution. Its hackish but seems to work for now
In main css app.core.css
//You may change the px value here for small screen
@media (min-width: 300px) and (min-height: 500px) {
ion-modal ion-backdrop {
visibility: visible; }
}
.modal-wrapper {
position: absolute;
left:0;
top:0;
}

// In you modal css
.modal-class-name {
position: absolute;
top: calc(50% - 45vh); // half of vh
left: calc(50% + 10vw); // half of 100-vw
width: 80vw;
height: 90vh;
}

Hope this helps anyone looking for a solution

1 Like
6

This helped. But i don’t want this to affect every single modal i have. how can i be selective?

7

Any news on how be selective?
@Mobius77 i’m using that .scss code:

.modal-wrapper{
    position: absolute;
    width: 30vw;
    height: 20vw;
    top: 0; 
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border: 0;
}

But it applies to all modals… How to specify one?
I have mymodal.html and mymodal.scss file and that code is in the second one.

1 Like
8

I’d like to know too how to apply it just for one modal
Thanks :slight_smile:

9

As I alluded to in my previous post, It’s just basic css to scope to the class automatically generated by ionic whose name corresponds to your modal HTML.

I am writing from my phone at the moment so I can’t look at the Chrome inspector to see the hierarchy of the elements generated by using a modal, but the css you need to use is either

.mymodal .modal-wrapper{
Styles here
}

Or

.mymodal.modal-wrapper{
Styles here
}

Or

.mymodal > .modal-wrapper{
Styles here
}

depending on the element hierarchy, and assuming your modal page is named mymodal.html.

The styles will only be applied to that modal because by doing the above (whichever works) you have now scoped it as such. To apply different css styles to another modal then do the same wrapper as above (whichever code works) but change .mymodal to the name of your other modal HTML page.

Also just a warning -> using viewport width and height is not supported by all platform versions. Www.caniuse.com has more details, as well as workarounds which I have implemented to work with ios7.

I hope this helps.

10