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 im…

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:…

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?

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 scopin…

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 { positi…

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

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…

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

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…

[image] Ionic2 common css styles, how to? ionic-v3 well yes this can be done with some tricky ways. you will realise that ionic add the element <ion-reorder> to the list which becomes the icon. We cannot simply make it disappear by using css “display: none”, becuz in ord…

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

Ionic Framework ionic-v3

Andrea-W August 9, 2016, 8:17am 10

Topic		Replies	Views
Ionic modal taking up the height and width of the mobile device ionic-v1	4	9339	March 15, 2016
Modal without going full-screen ionic-v3	11	24109	July 19, 2021
Custom modal / alert (with HTML, form...) ionic-v3	64	82598	November 9, 2019
How to create a small modal which displays only in the centre of the page ionic-v3	8	1001	October 13, 2017
Ionic 3 Custom Modal ionic-v3	3	2119	July 19, 2021

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

Related topics