jquerypositionjquery-ui-dialog

Position jQuery dialog center on mobile device issue


I use the jQuery dialog with position: fixed on my website. On PC this dialog has the center position by default. On mobile device, it sets the position to the top left. I tried different methods but it failed to position this dialog center on mobile.

Code:

CSS:

.ui-dialog {
    position: fixed;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
}

JS:

function isMobileDevice() {
    var mobileRegEx = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry", "i");
    return mobileRegEx.test(navigator.userAgent);
}

$("#myDialog").dialog({
  title: "Info",
  closeText: "Close",
  width: 440,
  minWidth: 440,
  height: 250,
  minHeight: 250,
  modal: true,
  resizable: false,
  open: function() {
    if (isMobileDevice()) {
        $(this).dialog("option", "position", { my: "center", at: "center", of: window });
    }
  }
});

Any ideas how to set it to the center on mobile device? Thank you for your help.


Solution

  • So, I have fixed it by myself. My solution is suitable for the 2 screen orientations: portrait and landscape.

    1. I set the dialog center to the document instead of a window: $(this).dialog("option", "position", { my: "center", at: "center", of: document, within: document }); This sets the dialog to the center of document in portrait mode and also sets the starting point for the landscape mode.
    2. I run the mobileDlgPosition() function, which checks for landscape mode. And if the device is in landscape mode, then it calculates and set the dialog top position by using this method: (window.outerWidth - $(".ui-dialog").width()) / 2;
    3. Finally, I added the $(window).on("orientationchange") function which checks for the dialog instance and if the dialog instance is available it runs mobileDlgPosition() function.

    My code:

    function isMobileDevice() {
        var mobileRegEx = new RegExp("Android|webOS|iPhone|iPad|iPod|BlackBerry", "i");
        return mobileRegEx.test(navigator.userAgent);
    }
    
    $(window).on("orientationchange", function() {
      var dlgInstance = $("#" + $(".ui-dialog").attr("aria-describedby")).dialog("instance");
        
      if (dlgInstance) {
          mobileDlgPosition();
      }
    });
    
    function mobileDlgPosition() {
        if (window.screen.orientation.type != "portrait-primary") {
            var landscapeTopPos = (window.outerWidth - $(".ui-dialog").width()) / 2;
            $(".ui-dialog").css("top", landscapeTopPos + "px");
        }
    }
    
    $("#myDialog").dialog({
      title: "Info",
      closeText: "Close",
      width: 440,
      minWidth: 440,
      height: 250,
      minHeight: 250,
      modal: true,
      resizable: false,
      open: function() {
        if (isMobileDevice()) {
            $(this).dialog("option", "position", { my: "center", at: "center", of: document, within: document });
            mobileDlgPosition();
        }
      }
    });
    

    I tested it on my phone - Xiaomi Mi 9. Everything works well.

    Result:

    jQuery dlg issue fixed