The modal will only take up the full height and width of the screen on smaller devices. Look at this codepen , open the modal and resize the window and you will see it changes size based on the window size.
You can override the CSS to accomplish this. Here are some ways users have done this:
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%;
bo…
So far the easiest way is to modify the ion-modal-view tag css.
<ion-modal-view style="width: 90%; height: 90%;">
You might also want to play with the top, right, left and bottom property as well to centre the modal on screen.
For e.g if the width is 90% and height 90%, it should be 5% from all sides to center it
<ion-modal-view style="width: 90%; height: 90%; top: 5%; left: 5%; right: 5%; bottom: 5%;">
If you don’t want to add it as inline, then you can make it into a class.
2 Likes