My popup is losing it's layout:liquid setting when I close and reopen it

Page layout & navigation
1

I’m creating a popup like this:

$('#items-popup-single').mobiscroll4().popup({
    closeOnOverlayTap: false,
    layout: 'liquid',
    buttons: ['cancel'],
    display: 'top',
    scrollLock: false,
    responsive: {
        small: {
            display: 'center'
        }
    },
    onBeforeShow: function (inst) {
        var s = inst.settings;
    },
    onShow: function (inst) {
        var filterinput = $(this).find('.filterinput');
        filterinput.val('').trigger('keyup');
        window.setTimeout(function(){document.getElementById('filterinput').focus();},500);
    }
});

No on this popup I have a list and when the user clicks on an item in this list I automatically close the popup, like so:

$('.singleitem').on('click',function(){
  var itemvalue = $(this).data('value');
  $('#items-popup-single').mobiscroll4().popup('hide');
  console.log("item value: " + itemvalue);
});

So far everything works fine. The problem is if I then open the popup again, it’s no longer taking up 600px in space. (Note, I’m working on a windows desktop) It’s as small as possible based on the content of the popup. So it seems to be losing its “liquid” layout setting when I close and reopen the popup. How do I get around this?

2

Well, I realized it’s losing more than just the layout property, but all properties. I ended up re-initializing the popup each time it’s closed. That seems to do the trick, but if there’s a better way please let me know.

3

Hi Vincent,

You’re calling the hide method incorrectly. .mobiscroll4().popup() with any argument means a re-initialization. To call a method, you need to use:

$('#items-popup-single').mobiscroll4('hide');
4

Ah, thank you! Easy fix.