CODEWITHSUNDEEP
htmlionic-framework
Bill Noble
Bill Noble

Reputation: 6744

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

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>

Upvotes: 4

Views: 8991

Answers (5)

schankam
schankam

Reputation: 11724

You can do this by using the 3rd parameter taken by the modal controller, by using the cssClass option, and apply the css of your choice.

This can be found in the ModalController API documentation under the Advanced > Option description.

Upvotes: 1

Parth Acharya
Parth Acharya

Reputation: 545

Above all method would only work if you use sass, and change accordingly in the scss

however you can go to the ionic.css, find a media query which has the condition for min-width of 680px, there'll be only one, just change it to 0px and you can play with your modal's dimension as you want, it won't go full.

Upvotes: 1

known-as-bmf
known-as-bmf

Reputation: 1222

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 !

Upvotes: 3

Nick
Nick

Reputation: 14283

I know that this is old, but i solved the background issue like this:

@media (min-width: 0px) {
  .modal-backdrop-bg {
    opacity: 0.5 !important;
    background-color: #000;
  }
}

The way the modal work by default, is to make the modal go fullscreen if window size is less than 680px. If the window is less than 680px, the background is not needed anymore and so it is hidden by changing it's opacity to 0 and it's background colour to nothing.

Adding this class prevents the background to disappear if the window size is less than 680px. With tha being said, this means the background is actually always visible behind the modal (shouldn't be a problem at all, just be sure the z-index are correct)

Also, I would raccomend to add the style to a class instead of having the properties inline

Upvotes: 3

Bill Noble
Bill Noble

Reputation: 6744

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.

Upvotes: 3

Related Questions