ionic2 - Modal window design


#1

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?


#2

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;
}

#3

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.


#4

Please, can I add menu to a modal window in ionic v2???