如何扩展select2组件下拉列表超出jquery模式对话框

Question

我在jquery模式对话框中使用select2组件。我需要将下拉菜单显示在对话框的边界之外。现在，一个长下拉列表被对话框边框截断。

下面是一个例子，并且jsfiddle：

<div id="test-dialog" class="widget" style="display:none;"> 
    <form id="Newfrm" name="Newfrm" method="post"> 
     <fieldset id="Field" step="1" style="margin-top: 10px;"> 
      <label for="NewField" style="width:90px; text-align:right;">Field</label> 
      <select name="NewField" id="NewField"> 
       <option value=""></option> 
       <option value="1">test1</option> 
       <option value="2">test2</option> 
       <option value="3">test3</option> 
       <option value="4">test4</option> 
      </select> 
     </fieldset> 
    </form> 
</div> 

$("#NewField").select2({ 
      placeholder: "Select a Field", 
      allowClear: true, 
      dropdownParent: $('#test-dialog') 
     }); 

$("#test-dialog").dialog({ 
      width: "550", 
      resizable: false, 
      modal: true 
     }).dialog('option', 'title', 'New Test Dlg'); 

Answer 1

的解决方案是改变

<div id="test-dialog" class="widget" style="display:none;"> 

到

<div id="test-dialog" class="widget" style="display:none; overflow:visible !important">