I am using Ionic 2’s modal feature. The modal takes over 100% of the screen. I would like it to less (~80% of the the screen size) like an actual modal window. Can I control the height and width of the this Modal window?
Hi
maybe check the component definition of Alert in the ionic-framework and see how it is done on an Alert (node_modules/ionic-framework/components/alert)? Specifically, the scss code, which defines the overlay settings.
I haven’t made a smaller overlay myself either, so no final solution yet.
Tom
// Alerts
// --------------------------------------------------
$alert-min-width: 250px !default;
$alert-max-height: 90% !default;
$alert-button-line-height: 20px !default;
$alert-button-font-size: 14px !default;
$alert-button-margin-right: 8px !default;
ion-alert {
position: absolute;
z-index: $z-index-overlay;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
input {
width: 100%;
}
}
.alert-wrapper {
z-index: $z-index-overlay-wrapper;
min-width: $alert-min-width;
max-height: $alert-max-height;
display: flex;
flex-direction: column;
opacity: 0;
}
I have tried working with this, but have had no success. It would be great if Ionic would make the Modal window appear as a layer on top of the page as a Modal window is known to do, otherwise it looks almost exactly like a regular page.
Please, can I add menu to a modal window in ionic v2???