Ionic modal fullscreen mode

ionic-v1
1

Hi,

When I open modal on iPhone is displaying in fullscreen but when I open on iPad modal is displaying on the center of screen but not fullscreen? It depends on content or it is a bug?

Regards,
ol3j

1 Like
2

It is intended to work like that.
It depends on the viewport.

3

Thanks. Is it a fast solution to work with modal only fullscreen mode?
Maybe add option for ionicmodal in the future?

4

The modal adjusts based on media queries. So at a certain screen size, it resizes like the modals in iOS. But if you need a modal thats fullscreen all the time, you can use this css.

.modal{
  top: 0 ;
  bottom: 0 ; 
  left: 0 ;
  right: 0 ;
  width: 100% ;
}
15 Likes
5

What if I need a modal that’s not fullscreen at all? I have two lines of information that will fit on a small little modal window center screen but this big horrific full screen window pops up and looks terrible.

6

@Andir Why not use a Popup?

http://ionicframework.com/docs/api/service/$ionicPopup/

1 Like
7

When using this on iOS devices, if I have a back arrow that I place on the header, the arrow almost touches the status bar. Is there a way to push things down for iOS? I notice in your SASS you sometimes move things down by 20 px.

8

Can you provide a codepen example? I can load it on a device and see if I can replicate it

9

Codepen of fullscreen modals - test on iPad

What I’ve done for now is use a merges folder with the original suggested CSS for Android and for iOS I changed the top parameter to 20px (the height of the status bar). However, doing so doesn’t get me a consistent color across the header.

11

Here’s a codepen where I push the top down 20px for iPads.

http://codepen.io/SashaGeekette/pen/vOzryE

However, the color of the statusbar doesn’t match the header.

image
NewHeader.jpg2048Ă—1536 80.1 KB

1 Like
12

So the css is half-there, just needs a few more lines to adjust the header bar.

/* Suggested by ionic developers to make modal full height on tablets*/

@media (min-width: 680px) {
  .modal {
    top: 0px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }
  .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) > * {
    margin-top: 20px;
  }
  .platform-ios.platform-cordova .modal-wrapper .modal .bar-header:not(.bar-subheader) {
    height: 64px;
  }
  .platform-ios.platform-cordova .modal-wrapper .modal .has-header,
  .platform-ios.platform-cordova .modal-wrapper .modal .bar-subheader {
    top: 64px;
  }
}
4 Likes
13

Works like a charm. Thank you.

14

why the modal is full screen on device(ios and android),and I try to change the width and heigh,but and dark overlay is miss

15

For Ionic2:

If you’re aiming to make the modal fullscreen on tablets I wouldn’t recommend overriding this in the CSS. Instead, consider overriding the SASS variables in your app.variables.scss file. Start with:

$modal-inset-height-large: 100%;
$modal-inset-height-small: $modal-inset-height-large;
$modal-inset-width: 100%;

See additional variables that you can override at:

1 Like
16

Thanks Meyer…!!! its really working for me. :slight_smile: