16

I have seen a strange behavior of jQuery UI Dialog and I am not able to understand:

  1. What the issue is? or
  2. What am I doing wrong here? or
  3. Is this a known bug?

Steps followed to replicate the issue:

  1. Open the jQuery UI dialog by clicking on the New / More buttons.
  2. Then try re-sizing the dialog vertically.
  3. 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

Before re-sizing

After re-sizing

After re-sizing vertically the width shrinks automatically

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
    });
});
1
  • this bug will in the latest version jQuery UI 1.12.1 i would of thought they would have corrected this by now??? after more than 2 years im guessing several, but what i dont get is i know they have revamped the dialog since then so.. am i missing something?
    – Seabizkit
    Jul 8, 2017 at 20:06

6 Answers 6

9

In the tickets #8506 and #9832, it is mentioned, that the bug has to do with different box-sizing set. Obviously the calculation of the dialog/content doesn't work right if the dialog container or the dialog content are not box-sizing: content-box. Best solution for me was adding this to the css:

.ui-dialog, .ui-dialog-content {
    box-sizing: content-box;
}

Updated jsFiddle with this fix.

2
  • I like your solution... Short and simple. Thanks. Aug 27, 2018 at 19:28
  • 2
    content still shrink when resizing. May 18, 2020 at 4:48
6

I did some more research and found out that this is a known bug (jQuery UI Team knows about the bug). And they have several Tickets assigned to this bug. If you want to follow their bug tracking then look here:

  1. Ticket #8506
  2. Ticket #9832
  3. Ticket #10069

I found a workaround until they (jQuery UI Team) find a solution to the bug. Workaround is to make use of resizeStop event of the Dialog while initializing the dialog. So the code would 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);
}

EDIT (28th Aug 2018): I found @Dev-iGi's solution to be better. So marking it as an answer. I updated my solution to include his. Check here: JSFiddle link

4

I didn't want to use a hardcoded number of pixels (like - 34 in another answer) because that's just never a good idea. At some point, it'll be a different size (maybe using a different theme) and the fix will not work anymore. The answer with the CSS fix didn't work right in my case but gave me the right hint.

So here's another "fix"/workaround that's simple:

//Resize handler for broken Dialog
function fixDialogWidth(event, ui)
{
    var $dialog = $(event.target);
    var $content = $dialog.closest(".ui-dialog-content");
    $content.css("width", "100%");
}

//Create Dialog
$caller.dialog({
    resize: fixDialogWidth,
});

Or inline:

//Create Dialog
$caller.dialog({
    resize: function() {
        $(this).closest(".ui-dialog-content").
        css("width", "100%");
    },
});

Tested with jQuery UI v1.11.

It's just plain awkward that this very basic feature has been broken for so long. Unfortunately, most of the jQuery bug reports don't offer an acceptable solution.

4
  • 1
    +1 on "...jQuery bug reports don't offer an acceptable solution". Its probably because now jQuery is becoming a legacy library and its team has moved on to some other project(s). Apr 25, 2018 at 5:28
  • 1
    I like your answer. I would consider marking it as an answer if you could take care of 1 little bug still left. Correct the height of the content as well and let me know so that I can verify your solution. Thanks. Apr 25, 2018 at 5:42
  • also using .css('width', 'unset') instead to avoid overflow when we have scroll bars etc.
    – Etherman
    Nov 20, 2019 at 14:27
  • This deserves more upvotes Sep 29, 2021 at 15:22
3

Based off of Khurram's solution, this is more robust, as it doesn't use magic numbers, but instead accounts for the paddings.

I also chose to do it on the resize event instead of resizeStop, as then it doesn't 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);
},
1

That css worked for me:

.ui-dialog .ui-dialog-content {
    width: 100% !important;
}
2
  • I had to add "box-sizing: border-box;"
    – Dan Menes
    Sep 28, 2018 at 15:42
  • 1
    it's make my dialog full screen. May 18, 2020 at 4:51
1

I use the following which is a result from the temporary solution from #10069 and it shows reducing or removing the default big padding can cause this issue.

.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;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.