Как исправить размер диалогового окна JQuery UI во время перетаскивания?

Question

Это был простой диалог, как показано ниже, его высота уменьшается при каждом перетаскивании диалогового окна. Его значение высоты даже изменяется, когда я устанавливаю параметр resizable = false. Наконец, я исправил его, изменив высоту диалогового окна перетаскивания в обработчике событий dragStop.

Обнаружена аналогичная проблема here, но это было с IE, и автор предложил не устанавливать значение высоты, что IMHO не подходит для всех случаев использования.

Я использую Chrome и JQuery UI 1.8.19

<p><a id="edit" href="#">Open Editor</a></p> 
<div id="editor"></div> 

$(document).ready(function() 
    { 
     $("#edit").on("click", function() 
     { 
       var $dialog = $("#editor") 
       .dialog(
       { 
        title: "HTML Editor", 
        modal: true, 
        autoOpen: false, 
        width: 600, 
        height: 350, 
        minWidth: 300, 
        minHeight: 200, 
        closeOnEscape: true, 
        resizable: false, 
        open: function() 
        { 
        }, 
        buttons: 
        { 
         "Save": function() 
         { 
          $(this).dialog("close"); 
         }, 
         "Cancel": function() 
         { 
          $(this).dialog("close"); 
         } 
        }, 
        dragStop: function (e, ui) 
        { 
         $(this).dialog("option", "height", "377px"); 
        } 
       }); 
      } 

      $dialog.dialog("open"); 
      return false; 
     }); 
    }); 

Update 1: Я только что создал новый проект (ASP.NET MVC 4) и обнаружил, что проблема возникла, когда я использовал следующее правило CSS, Зачем?

* 
{ 
    margin: 0; 
    padding: 0; 

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

Answer 1

JQuery 1,8, наконец, понять коробчатого проклейки тщательно, и мы больше не нужно тонкой настройки :)

Documentation

Answer 2

jQuery неправильно вычисляет размер диалогового окна при использовании размера поля: border-box (с шаблоном по умолчанию). Я установил на высоте диалоговой памяти в открытом событии и вручную установить диалог высоты в событиях dragStart/dragStop:

    dragStart: function (e, ui) 
        { 
         $(this).parent().height(height); 
        }, 
        dragStop: function (e, ui) 
        { 
         $(this).parent().height(height); 
        } 

Answer 3

я получил это фиксируется с помощью простых CSS:

.ui-dialog { 
       height:auto !important; 
      }