CODEWITHSUNDEEP
angularjsionic-framework
Devidas Kadam
Devidas Kadam

Reputation: 944

Unable to see and scroll the html view of ionic modal when keyboard appear

I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.

Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal. kindly refer the screenshot.

please see the attached image

Thank you.

Upvotes: 1

Views: 2391

Answers (2)

David Oti
David Oti

Reputation: 51

Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run

NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml

Make sure jquery is included in your app.

 window.addEventListener('native.keyboardshow', keyboardShowHandler);
  window.addEventListener('native.keyboardhide', keyboardHideHandler);

  function keyboardShowHandler(e){ 
  setTimeout(function() { 
    var originalHeight =  window.innerHeight-30; 
    var newHeight = originalHeight - e.keyboardHeight;
      $('ion-modal-view ion-content').css("height", newHeight); 
  }, 0);
    }

function keyboardHideHandler(e){ 
  setTimeout(function() { 
    var newHeight = '100%';
      $('ion-modal-view ion-content').css("height", newHeight); 
  }, 0);
 }

Upvotes: 1

Devidas Kadam
Devidas Kadam

Reputation: 944

Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik also tried this. see the comment by him

    @media(min-width: 680px){
    .modal{ top: 0; height: 70%; }
    body.keyboard-open.modal{ height: 90%; }
    body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
    overflow-y: scroll;
    height: 100% !important;
    top: 0;
}

Upvotes: 1

Related Questions