jQuery UI Dialog na zmianę rozmiaru kurczy treści Dialog

Question

Widziałem dziwne zachowanie jQuery UIDialog i nie jestem w stanie zrozumieć:

1. Jaki problem jest? lub
2. Co ja tu robię źle? lub
3. Czy to znany błąd?

Kroki następnie powtórzyć tę kwestię:

1. otworzyć okno jQuery UI klikając Nowy/więcej przycisków.
2. Następnie spróbuj zmienić rozmiar okna w pionie.
3. Pojawi się nieprawidłowość, że szerokość zawartości okna dialogowego zmniejsza się automatycznie, co powoduje pojawienie się paska przewijania w oknie dialogowym.

EDIT: widzę, że jeśli usunąć twitter bootstrap ze strony wtedy nadal pojawia się problem, ale nie ma wiele zauważalne. niezależnie od tego, z jakiego powodu nie mogę usunąć twitter bootstrap z mojej strony, ponieważ jest on używany we wszystkich innych miejscach mojego obecnego projektu.

Przed zmianą rozmiaru

Po ponownym wielkości

Oto mój kod jQuery. Proszę sprawdzić 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

zrobiłem kilka badań i okazało się, że jest to znany błąd (jQuery UI zespół wie o bug). I mają kilka Biletów przypisanych do tego błędu. Jeśli chcesz śledzić ich śledzenia błędów następnie spojrzeć tutaj:

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

---

znalazłem obejście dopóki nie (jQuery UI Team) znajdź rozwiązanie tego błędu.
Oto działa JSFiddle link.
Obejście polega na użyciu zdarzenia o nazwie resizeStop podczas inicjowania okna dialogowego.Więc kod wyglądałby następująco:

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

To css pracował dla mnie:

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

Answer 3

oparciu off roztworu Khurram, ten jest bardziej niezawodny, ponieważ nie używać magii liczb, ale zamiast rachunki na paddings.

Wybrałem również to wydarzenie na resize wydarzenie zamiast resizeStop, ponieważ wtedy nie przeskakuje w tę iz powrotem. 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

używam następujących składników, które jest wynikiem tymczasowej roztworu z # 10069 i to widać zmniejszenie lub usunięcie domyślnego duży wyściółkę może powodować ten 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; 
}