CODEWITHSUNDEEP
jqueryjquery-uitwitter-bootstrap-3
Khurram Hassan
Khurram Hassan

Reputation: 1544

jQuery UI Dialog on resizing shrinks the content of the Dialog

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

Upvotes: 17

Views: 4395

Answers (6)

Khurram Hassan
Khurram Hassan

Reputation: 1544

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

Upvotes: 6

Dev-iGi
Dev-iGi

Reputation: 156

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.

Upvotes: 10

c0xc
c0xc

Reputation: 2376

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.

Upvotes: 4

Dacker
Dacker

Reputation: 892

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

Upvotes: 1

Anton Abilov
Anton Abilov

Reputation: 343

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);
},

Upvotes: 3

Jochen
Jochen

Reputation: 882

That css worked for me:

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

Upvotes: 1

Related Questions