Make a modal smaller than the screen

Ionic Framework ionic-v3
1

Hi everyone,

I’m working on an Ionic 2 app and I need to make a modal smaller than the screen.
I’ve seen a topic that talks about it. It’s interesting but in my case I would like that the background to be transparent/black, the same way we launch an app in full-screen with ionic serve.

1 Like
2

If you are testing on phone (ios or android) the modal will show full screen. On tablet it will not show the modal full screen instead it will show with the default size.

I have been able to change and size of the modal and style the dialog by using css styling in the scss
Here are some of css the attributes I have played with -

.myModal {
background-color: cornflowerblue !important;
color: Black;
position: absolute !important;
width: 600px !important;
height: 570px !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: auto !important;
border-style: solid;
border-width: 1px;
border-radius: 10px !important;
border-color: black;
overflow: hidden !important;
}

I applied the above style to the modal
<ion-content class="myModal">

3 Likes