I have seen a strange behavior of jQuery UI Dialog and I am not able to understand:
- What the issue is? or
- What am I doing wrong here? or
- Is this a known bug?
Steps followed to replicate the issue:
- Open the jQuery UI dialog by clicking on the New / More buttons.
- Then try re-sizing the dialog vertically.
- You will see the abnormality that width of the dialog's content decreases automatically, making a scrollbar to appear inside the dialog.
EDIT: I see that if I remove twitter bootstrap from the page then the issue still appears but is not much noticeable. whatever be the reason I cannot remove twitter bootstrap from my page because it is being used in all other places in my current project.
Before re-sizing
After re-sizing
Here is my jQuery code. Please check 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
});
});