Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue with iOS dialog height on open

See original GitHub issue

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(){'RDOC_calendar_new.php', '_self'); }, confirm: function(){ this.$content.find('form').submit(); } }); });

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:18 (3 by maintainers)

github_iconTop GitHub Comments

dvmobleycommented, Mar 3, 2016

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.

Ridder90commented, May 25, 2017

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!

        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){
                        menu = some_html(;
                        //tried hotfix
            }).fail(function() {
                self.setContent('<br>Can\'t establish a connection to the server.' );
        buttons: {
            formSubmit: {
                text: 'save',
                btnClass: 'btn-blue',
                action: function() {
Read more comments on GitHub >

github_iconTop Results From Across the Web

[Dialog] Height "jumps" at bottom on scroll when Safari ...
Ideally, I'd want it to be impossible to "scroll" the page beneath the Dialog while it's open. That way the iPhone Safari address...
Read more >
About the problem of the dialog ge… | Apple Developer Forums
When a dialog is generated with a div in Safari on iPadOS 15.0, There is a problem that the UI of the button...
Read more >
Height of newly opened dialog in Safari 8 is incorrect
When displaying a new modal, its height is less than expected. If I right-click the top area of the modal and select "Customize...
Read more >
How to control the width and height of the default Alert Dialog ...
Here we will be seeing how to control the width and height of default alert box, For controlling the height and width we...
Read more >
overscroll-behavior - CSS: Cascading Style Sheets | MDN
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found