CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-dialog
actaram
actaram

Reputation: 2058

jQuery UI dialog stops resizing automatically after it has been dragged

I have a jQuery UI dialog which contains a form than can be expandable depending on the choices the user makes: https://i.sstatic.net/7oTxm.png.

For instance, if the user changes the "answer type" to numeric, content will be added to the dialog (or removed from it): https://i.sstatic.net/LeOIv.png.

So if the user opens the dialog, makes choices that will expand the dialog without moving it, the dialog will resize normally, as you can see in the previous image. However, if the user drags the dialog and then makes choices that expands the dialog, it won't resize automatically as it should: https://i.sstatic.net/HY1L3.png.

This is how I initialize my dialog:

var dialogToShow = isDeleteConfirmDialog ? $("#confirmDeleteDialog") : $("#customDialog");

dialogToShow.dialog({
    // autoResize: true, -- does not work neither
    resizable: false,
    title: "My title",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    hide: { effect: 'scale', duration: 400 },
    open: function () {
        $('.ui-widget-overlay').bind('click', function () { dialogToShow.dialog('close'); });
    }
});
dialogToShow.parent().draggable();

I also tried setting the dialog's position to absolute, but it didn't change anything.

I made a JSFiddle to see if I could reproduce my issue and indeed I was able to: https://jsfiddle.net/BishopBarber/61jqhsgt/2/

Edit: This does not seem to be a problem in the latest versions of IE, so it might be a bug

Upvotes: 2

Views: 1150

Answers (2)

actaram
actaram

Reputation: 2058

After performing several tests, I realized this is a bug that occurs in the jQuery UI versions 1.11.2 to 1.11.4. The subsequent and previous versions do not seem to have this problem. If you do not want to change your version, a workaround would be what Mark Schultheiss proposed.

Upvotes: 2

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

If you remove the animation, then close/open on the change, I believe it will work. Not ideal but works around the issue.

Note you can remove the "hidden" style if you set it to not auto open.(see fiddle markup)

Reworked code:

$(function() {
  var dialogToShow = $("#customDialog");
  dialogToShow.dialog({
    resizable: false,
    title: "Dialog",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    // hide: {
    //    effect: 'scale',
    //    duration: 400
    //  },
    autoOpen: false
  });
  dialogToShow.parent().draggable();
  $(document).on('click', '.ui-widget-overlay', function() {
    dialogToShow.dialog('close');
  });
  $("#openDialogBtn").on("click", function() {
    dialogToShow.dialog("open");
  });
  $("#questionType").change(function() {
    if ($(this)[0].selectedIndex === 1) {
      $("#controlEditor").html($("#loremIpsum").html());
    } else {
      $("#controlEditor").html("");
    }
    dialogToShow.dialog("close").dialog("open");
  });
});

Fiddle update: https://jsfiddle.net/MarkSchultheiss/61jqhsgt/3/

Upvotes: 1

Related Questions