Jquery ui Dialog loaded with ajax call won't center horizontally

Question

I have a dialog box that is called once an ajax call loads an image with an unknown size. I have a max height and max width. I have found similar issues, but the answers have not solved my problem. As of now I am taking the screen width and dividing it by 4 to set a X coordinate. Hoever this does not exactly center the window.

var windowWidth = $(window).width()
var modalCenter = windowWidth/4;
$("#userImage").dialog({
    autoOpen: false,
    modal: true,
    width: 'auto',
    create: function (event, ui) {
           $(this).css("maxWidth", "700px");
    },
    height: 'auto',
    maxHeight: 600,
    show: { effect: 'fold', duration: 250 },
    position: [modalCenter, 100],
    buttons: {
        Cancel: function () {
        $(this).dialog("close");
    },
    Crop: function () {
     var x = $('#x').val();
     var y = $('#y').val();
     var w = $('#w').val();
     var h = $('#h').val();
     if (!checkCoords())
        return false;
     $.ajax({
         url: "CropImage.aspx?x=" + x + "&y=" + y + "&w=" + w + "&h=" + h,
         cache: false
     }).done(function (html) {
         //another ajax call will get all images as a list and display them where they can be set as primary images/subImages
       })
    }
  }
});

Here is an image:

enter image description here

Can you create a [jsFiddle](http://jsFiddle.net) demonstrating your issue? — Code Maverick, Dec 05 '13 at 21:37
Have you tried not setting the position to see where it appears? Take a look at this: http://stackoverflow.com/questions/1839702/how-can-i-position-my-jquery-dialog-to-center — Poornima, Dec 05 '13 at 21:39
@Scott I can't recreate the issue in fiddle because the dialog window opens after an image of unknown size is loaded into it via ajax. THe issue does not occur without that ajax call. — David Aguirre, Dec 05 '13 at 21:42
What is 'crop'? Have you extended the jquery dialog widget? Excuse me if my question is dumb, but it is not listed here http://api.jqueryui.com/dialog/. — Poornima, Dec 05 '13 at 21:49
@Poornima Uploaded Image. Thats simply a button to send coordinates to the server side code. — David Aguirre, Dec 05 '13 at 21:51
I am not sure this is the best solution, but since you have used var modalCenter = windowWidth/4; Instead you could use (windowWidth / 2) - (this.outerWidth() / 2) for 'left' and similarly with height for 'top' and set the position to place the dialog in center. — Poornima, Dec 05 '13 at 21:54

score 1 · Answer 1 · answered Dec 05 '13 at 22:01

When your ajax is done, can you re-position the dialog?

something like:

Crop: function(){
    var self = $(this);
    $.ajax({...}).done(function(){
        self.position({
            my: "center",
            at: "center",
            of: window
        });
    });
}

score 0 · Accepted Answer · answered Dec 06 '13 at 18:41

I wanted to answer my own question. Once the ajax call is done and the modal opened, I then take half of the 'window width' and half of the 'Dialog width'. I then subtract the dialog width from the window width and set the 'left' position to that new number. I use an interval as a delay to get the full width of the dialog. It takes approx 250 miliseconds for it to open.

$('#userImage1').dialog('open');
    var windowWidth = $(window).width();
    var i = setInterval(function () {  
        dialogWidth = $('.ui-dialog').width();
        dialogCenter = dialogWidth / 2;
        modalCenter = windowWidth / 2 - dialogCenter;
        $('.ui-dialog').css('left', modalCenter);
        clearInterval(i);
    }, 300);

Jquery ui Dialog loaded with ajax call won't center horizontally

2 Answers2