Search code examples
user-interfacemobile-safarimodalpopupextenderipad

How to fix scrolling issue of Ajax Modal popUp in iPad safari browser?


I have Asp.net website Its running well in all browsers except iPad Safari.

but When I testing then I getting issue in scrolling popup & not renderd into whole page (some part of popup get hidden as par attachement) in Ipad browser,

sometime page content is too small compare to Modal popup height at that time "Close" button (at bottom part) going to hide.

Below, I attached screen-shot. look into screen-shot.
What should I do to fixed Modal PopUp issue in iPad.

enter image description here


Solution

  • Resize your modal and move it down to fit based on the smaller screens using css like this:

    @media screen and (max-height:768px){
    .popupPanel { min-height:550px; height:550px; }     
    }
    
    @media screen and (max-height:600px){
    .popupPanel.{ min-height:300px; height:300px; margin-top: 100px;  }
    }