Modal SCSS Variables Media Sceen Fullscreen


#1

I have a tablet where there modals displayed in fullscreen. Because ionic does not render in native screen resolution. The modals are displayed like on a smartphone (small screens).

I think ionic use css media queries or javascript to set the modals in fullscreen. But how to adjust the range (limits) for that? Are there variables?

Tablet Native Size: 1920 x 1132
Ionic Size: 960 x 566 px (platform.width/height)
Modals: Fullscreen

Btw. How to force ionic / cordova to render in native size?


#2

Solved by setting all variables from https://ionicframework.com/docs/api/components/modal/ModalController/ to a lower value as Ionic Size.

You can play with the following variables:

  $modal-inset-min-width: 500px;
  $modal-inset-min-height-small: 500px;
  $modal-inset-min-height-large: 500px;
  $modal-inset-width: 500px;
  $modal-inset-height-small: 500px;
  $modal-inset-height-large: 500px;