PNotify Confirm Module on Mobile with Modal mode

Question

I'm trying to use the Modal Confirm Dialog on mobile but it doesn't seem to work.

https://jsfiddle.net/ox0wobsu/11/

Refer to my JSFiddle. If you shrink the page and refresh to run you will see it doesn't work. Stretch the section large enough and it will come into view.

When Shrunk looks like this:

Want it to look like this...

What am I doing wrong with my example to make this work?

Here is my code for reference:

$(document).ready(function(){
    PNotify.prototype.options.styling = "bootstrap3";
    (new PNotify({
            title: 'Confirmation Needed',
            text: 'Are you sure?',
            icon: 'glyphicon glyphicon-question-sign',
            hide: false,
            confirm: {
                confirm: true
            },
            buttons: {
                closer: false,
                sticker: false
            },
            history: {
                history: false
            },
            addclass: 'stack-modal',
            stack: {'dir1':'down','dir2':'right','modal':true}
        })).get().on('pnotify.confirm', function() {
            alert('Ok, cool.');
        }).on('pnotify.cancel', function() {
            alert('Oh ok. Chicken, I see.');
        });
});

In contrast, here is a JSFiddle where it works, but in non modal mode. Notice if you shrink the page and refresh it looks correct.

https://jsfiddle.net/jrseqvf3/1/

Answer 1

Looks like this is a bug in PNotify. Add this CSS to fix it:

@media (max-width: 480px) {
  .ui-pnotify-mobile-able.ui-pnotify.stack-modal {
    margin-left: 0;
  }
}

Answer 2

Add this at the top of your CSS:

@supports (display: flex) {
    @media (max-width: 480px) {
      .ui-pnotify-mobile-able.ui-pnotify.stack-modal {
        margin-left: 0;
      }
    }
}