Making SP.UI.ModalDialog Scrollable on Mobile

Question

I have a basic Modal Dialog loading on my SharePoint page through a function. It loads correctly and can scroll on desktops perfectly fine.

I began testing the page for mobile functionality on a new iPad Air. The web page that loads within the modal dialog is too large for the dialog box, but you can not scroll left or right on the iPad, leaving part of the web page inaccessible. Is there a setting I need to set to allow this to happen?

Below is my code:

function myDialog(theUrl) {
    var options = {
        url: theUrl,
        autoSize: true
        };
    SP.UI.ModalDialog.showModalDialog(options);
}

Answer 1

You can force to display Scroll Bars using following styles

.ms-dlgContent {  
    overflow:scroll;   
}

.ms-dlgFrame {
    overflow:hidden;
}