Issue with iOS dialog height on open

I have a dynamic form that I’m loading in to a confirm dialog using the url method. It works great except for the opening event in mobile based browsers. It only opens to half the height of the first input then stops; however if you rotate the device the dialog opens the rest of the way. I have been trying it in Chrome and Safari on iPad and iPhone. What’s even more interesting is when I use the Puffin browser on either device it also works as designed.

----HTML Caller---- <button style="float:right; clear:right;" href="RDOC_Report_Event_new.php?ID=737&logonuser=gsx587&complex=Stophel" class="btn btn-warning edit"><span class="glyphicon glyphicon-pencil"></span></button>

-----JS---- $(document).on('click', '.edit', function(e){ e.preventDefault(); $('div.popover').hide(); var dest = $(this).attr('href'); var diagEdit = $.confirm({ title: 'Edit Report', content: 'url: ' + dest, columnClass: 'col-xs-12', animation: 'zoom', closeAnimation: 'scale', cancel: function(){ window.open('RDOC_calendar_new.php', '_self'); }, confirm: function(){ this.$content.find('form').submit(); } }); });

[dvmobley]

You’re awesome!

Unbelievable product by the way. Even though it’s got the bug I’m leaving it in production because users like it so much better than having to go to another page. I’ve not found anything else as easy to use or with as much options and documentation. Keep up the good work.

[Ridder90]

I have the same problem on safari and chrome on ios and only on iPhone 6.

When rotating screen everything look great, but on initial load the jconfirm-content-pane has an height of 0px, while the content is correctly loaded in the DOM. Also when using the remote webinspector for ios i see there is an empty style tag on jconfirm-content. When i remove the empty style tag the confirm box shows nicely!?!

Hope this helps!

 jq.confirm({
        title: 'title',
        backgroundDismiss: true,
        boxWidth: '96%',
        useBootstrap: false,
        closeIcon: true,

        content: function() {
            var self = this;
            return jq.ajax({
                type: "POST",
                url: psps.ajax_url,
                data: postdata
            }).done(function(response) {
                if (response.success){
                        self.buttons.formSubmit.setText(response.data.text);
                        menu = some_html(response.data);
                        self.setContent(menu);
                       
                        //tried hotfix
                        jq(window).trigger('resize');
                        self.setDialogCenter();
                 }
            }).fail(function() {
                self.setContent('<br>Can\'t establish a connection to the server.' );
            });
        },
        buttons: {
            formSubmit: {
                text: 'save',
                btnClass: 'btn-blue',
                action: function() {
                   do_stuff();
                }
            }
        }
    });