Can't set ionic modal bottom property

ionic-v1
1

I am trying to use modal for taking input from user.
I have created most basic modal and i want to show modal at center position with margin from all four sides(top,bottom,left,right). I am using CSS properties to get center position. Only problem is that bottom property is not working.
Example HTML code:

<ion-modal-view class="modal-center">
  <ion-content>
    Test content goes here.
  </ion-content>
</ion-modal-view>

CSS code:

.modal-center {
  width: 90%;
  height: 80%;
  top: 10%;
  bottom: 10%;
  left: 5%;
  right: 5%;
}

This shows margin from three sides only bottom margin is not working. How to set bottom margin so that modal will look at center position.
I am using ionic framework 1.0.0 rc5.

2

You need to override the min-height property coming from the modal class:

.modal-center {
    min-height: 0;
}
3 Likes
3

Thanks, that worked very well.