JQuery UI Dialog compresses dialog box contents when resized

Question

I saw the strange behavior of jQuery UI Dialog , but I can not understand:

• What is the problem? or
• What am I doing wrong here? or
• Is this a known bug?

The sequence of steps for replicating a problem:

• Open the jQuery UI dialog by clicking the New / More buttons.
• Then try resizing the dialog box vertically.
• You will see an anomaly that the width of the contents of the dialog box will decrease automatically, as a result of which a scroll bar appears in the dialog box.

EDIT: I see that if I remove the boot twitter from the page, the problem remains, but is not very noticeable. no matter why I can not remove twitter bootstrap from my page, because it is used in all other places of my current project.

Before recalibration

After recalibration

Here is my jQuery code. Please check out the JSFiddle here :

$(document).on("click", "#btnNew", function () { $("#popOutNewFolder").dialog({ show: "blind", hide: "blind", modal: true }); }); $(document).on("click", "#btnMore", function () { $("#popOutMoreFolder").dialog({ show: "blind", hide: "blind", modal: true }); }); 

Answer 1

I did some more research and found out that this is a known bug (the jQuery UI team knows about the bug). And they have several tickets assigned to this error. If you want to track bug tracking, look here:

• Ticket number 8506
• Ticket number 9832
• Ticket number 10069

---

I found a workaround until they (the jQuery UI Team) found a solution to the problem.
Here is the JSFiddle link.
A resizeStop is to use the resizeStop event of the dialog box when initializing the dialog box. Thus, the code will look like this:

 $(document).on("click", "#btnNew", function () { $("#popOutNewFolder").dialog({ show: "blind", hide: "blind", modal: true, resizeStop: myResize }); }); $(document).on("click", "#btnMore", function () { $("#popOutMoreFolder").dialog({ show: "blind", hide: "blind", modal: true, resizeStop: myResize }); }); function myResize(event, ui) { $(this).height($(this).parent().height() - $(this).prev('.ui-dialog-titlebar').height() - 34); $(this).width($(this).prev('.ui-dialog-titlebar').width() + 2); } 

Answer 2

Based on Khurram's solution, it is more reliable as it does not use magic numbers, but instead takes into account paddings.

I also decided to do this in the resize event instead of resizeStop , since then it does not jump back and forth. Updated JSFiddle

 resize: function() { var heightPadding = parseInt($(this).css('padding-top'), 10) + parseInt($(this).css('padding-bottom'), 10), widthPadding = parseInt($(this).css('padding-left'), 10) + parseInt($(this).css('padding-right'), 10), titlebarMargin = parseInt($(this).prev('.ui-dialog-titlebar').css('margin-bottom'), 10); $(this).height($(this).parent().height() - $(this).prev('.ui-dialog-titlebar').outerHeight(true) - heightPadding - titlebarMargin); $(this).width($(this).prev('.ui-dialog-titlebar').outerWidth(true) - widthPadding); }, 

Answer 3

This css worked for me:

 .ui-dialog .ui-dialog-content { width: 100% !important; } 

Answer 4

I am using the following, which is the result of a workaround from # 10069, and it shows that reducing or removing a large default add-on can cause this problem.

 .ui-dialog .ui-dialog-content { /* Fix resizing issue where content doesn't fit in the dialog anymore */ padding: 3.5px; } .ui-dialog .ui-dialog-titlebar { /* Adjust the titlebar so it is equal to the content fix */ margin: 3.5px; }