Ionic Modal Size

[Chris Ryhal]

Does anyone have an example using the Ionic tools how to set the size of the modal so its not full screen?

I would like it basically 50% height/width

[Serhii Kulibaba]

Hello Chris,

Thank you for contacting Appery.io support

You are able to change it's size as well as any other style with CSS class "modal", e.g.:
pre.modal {
width:100px;
height:100px;
}/pre

[Hendri Harmoko Lee]

it doesn't work

[Hendri Harmoko Lee]

i'm able to change the width not the height

[Evgene Karachevtsev]

Hello Hendri,

Please try to add weight to this rule, for example by adding !important, perhaps some default CSS rule overweights yours.

[Hendri Harmoko Lee]

it still doesnt seem to work. can you try it in your side?

[Serhii Kulibaba]

It works fine on our side. Please check the "width" property of the modal window with browsers dev tools and send us screenshot from it

[Safeer Khan]

Model Size

#packageModel .padding-content {
background: #ffffff none repeat scroll 0 0;
border-radius: 3px;
height: auto;
margin: 60% auto;
padding: 25px;
text-align: center;
width: 90%;
position: relative;
}
#packageModel {
background: rgba(0, 0, 0, 0.3) none repeat scroll 0 0;
}
#packageModel .padding-content h2 {
color: #2a2a2a;
font-size: 18px;
font-weight: 500;
text-transform: capitalize;
}
#packageModel .close {
color: #D00A2D;
font-size: 20px;
position: absolute;
right: 12px;
top: 12px;
}