jQuery UI-Dialog auf Redimensionierung schrumpft den Inhalt des Dialogs

Question

ich zu verstehen, ein seltsames Verhalten von jQuery UIDialog und ich bin nicht in der Lage gesehen habe

1. Was ist das Problem? oder
2. Was mache ich hier falsch? oder
3. Ist das ein bekannter Fehler?

Schritte gefolgt, das Problem zu reproduzieren:

1. Öffnen Sie die jQuery UI-Dialog, indem Sie auf den Neu/Weitere Schaltflächen klicken.
2. Versuchen Sie dann, den Dialog vertikal zu vergrößern.
3. Sie werden feststellen, dass die Breite des Inhalts des Dialogfelds automatisch abnimmt und eine Bildlaufleiste im Dialogfeld angezeigt wird.

EDIT: Ich sehe, dass, wenn ich twitter Bootstrap von der Seite zu entfernen dann noch das Problem scheint aber nicht viel zu spüren. Was auch immer der Grund sein könnte, warum ich Twitter Bootstrap nicht von meiner Seite entfernen kann, weil es an allen anderen Orten in meinem aktuellen Projekt verwendet wird.

Vor dem Wieder Sizing

Nach dem Wieder Sizing

Hier ist mein jQuery-Code. Bitte überprüfen Sie die 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

ich etwas mehr Forschung tat und fand heraus, dass dies ein bekannter Fehler ist (jQuery UI-Team kennt den Bug). Und sie haben mehrere Tickets für diesen Fehler. Wenn Sie wollen, dass ihre Bug-Tracking folgen dann hier aussehen:

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

---

fand ich eine Abhilfe, bis sie (jQuery UI-Team) finde eine Lösung für den Fehler.
Hier ist die Arbeit JSFiddle link.
Problemumgehung besteht darin, während der Initialisierung des Dialogfelds das Ereignis resizeStop des Dialogfelds zu verwenden.So ist der Code würde wie folgt aussehen:

$(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

Das CSS für mich gearbeitet:

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

Answer 3

Basierend off von Khurrams Lösung, das ist robuster, da sie nicht magische Zahlen verwendet, sondern stattdessen Konten für die Polsterungen.

Ich entschied mich auch, es auf dem resize Ereignis statt resizeStop zu tun, als dann es nicht hin und her springt. 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 4

Ich verwende die folgende, die von # 10069 ein Ergebnis aus der vorübergehenden Lösung ist, und es zeigt, zu reduzieren oder den Standard große Polsterung entfernen kann dieses Problem verursachen.

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