Is there a way to stop an ionic modal filling the screen?

Question

I am using an ionic modal to show a login form. This looks great when the screen is large, it is centred beautifully in the screen. But when the screen is shrunk to a certain point (e.g. iPhone 6 size) the modal takes up the full screen (both height and width). Is there a way to ensure the modal stays smaller than the screen?

My html looks like this:

<ion-modal-view  style="max-height:250px;">
  <ion-header-bar>
    <h1 class="title">Login</h1>
    <div class="buttons">
      <button class="button button-clear" ng-click="closeLogin()">Close</button>
    </div>
  </ion-header-bar>
  <ion-content>
    <form ng-submit="doLogin()">
      <div class="list">
        <label class="item item-input">
          <span class="input-label">Username</span>
          <input type="text" ng-model="loginData.username">
        </label>
        <label class="item item-input">
          <span class="input-label">Password</span>
          <input type="password" ng-model="loginData.password">
        </label>
        <label class="item">
          <button class="button button-block button-positive" type="submit">Log in</button>
        </label>
      </div>
    </form>
  </ion-content>
</ion-modal-view>

Answer 1

If your project is using SASS (which it probably is), you can play around with variables :

from _variables.scss:

$modal-bg-color:                  #fff !default;
$modal-backdrop-bg-active:        #000 !default;
$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;

$modal-inset-mode-break-point:    680px !default;  // @media min-width
$modal-inset-mode-top:            20% !default;
$modal-inset-mode-right:          20% !default;
$modal-inset-mode-bottom:         20% !default;
$modal-inset-mode-left:           20% !default;
$modal-inset-mode-min-height:     240px !default;

The inset-mode variables are especially useful in your scenario.

Short example from my own scss file:

$modal-inset-mode-break-point:    0px;  // modals are ALWAYS windowed
$modal-inset-mode-right:          5%;   // 5% "margin" to the right
$modal-inset-mode-left:           5%;   // 5% "margin" to the left

// Include all of Ionic
@import "<path to main ionic scss file>";

And you dont even have to fiddle around with the backdrop or the centering of your modal !

Answer 2

After much experimenting I stumbled across the following solution which seems to work well enough. I changed the styling of the ion-modal-view to:

<ion-modal-view  style="width: 80%; height: 60%; min-height: 0; max-height: 250px; top: 20%; left: 10%; right: 10%; bottom: 20%;">

The only problem that remains is the background behind the modal is not dimmed.