1

I have a ion modal which i want to show of 60% of my screen, but when keyboard appears the modal resizes to 60% of the screen (including keyboard) so it shrinks a lot. I want the modal to stay the same size (ideally the size of its contents). Pictures explain a lot.

This is the css

.ion-modal.modal {
  width: 90%;
  min-height: 0 !important;
  height: 60% !important;
  top: 5%;
  left: 5%;
  right: 5%;
  bottom: 5%;
  background-color: #fff;
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); }

And this the html

<ion-modal-view id="details_modal" class="ion-modal">
STUFF
</ion-modal-view>

enter image description here

enter image description here

klifa
  • 671
  • 1
  • 8
  • 27
  • Do you have this in your index ? – Ujjwal kaushik Sep 28 '16 at 19:20
  • @Ujjwalkaushik this ihe meta i have, it is the same except the minimum scale. tried with yours still same problem – klifa Sep 28 '16 at 19:34
  • 2
    Your problem is when keyboard shows , Your device height get reduced.And than your modal is taking 60% of that decreased height. maybe change it into px . and see what happens? – Ujjwal kaushik Sep 29 '16 at 07:51
  • Hi @Ujjwalkaushik i am aware that that is the problem, however is there a way the the device height is not affected by keyboard?I dont want fixed pixels because this should work in very different devices. – klifa Sep 29 '16 at 21:46
  • @Ujjwal kaushik thanks man, i've resolved this issue using --height:264px instead of --height:40%. – Ketan Chaudhari Jun 06 '20 at 07:16
  • Changing % to px as suggested by @Ujjwalkaushik fixed my issue. Thanks. – SureN Sep 26 '21 at 07:22

1 Answers1

0

I fixed this issue using <ion-content overflow-scroll="false"></ion-content>

overflow-scroll="false"

fix the issue for me.

victor sosa
  • 899
  • 13
  • 27