Как расширить выделенное выпадение за пределами содержащего его диалогового окна

Question

У меня есть Html.DropDownList в стиле Chosen в диалоговом окне интерфейса jQuery. Список элементов достаточно длинный, что при его открытии список обрезается границей диалогового окна.

Есть ли способ расширить выпадающую часть выпадающего падающего за границу диалогового окна, содержащего его?

Я хочу, чтобы результат похож на this.

HTML:

<div class="ui-dialog" id="deleteControl"> 
    <div class="mws-form-cols clearfix"> 
     <label>Select a document to delete:</label> 
     @Html.DropDownList("fileName", Model.fileDropdown, "", new { id = "fileDropdown", onchange = "$('#deleteDocName').val($('#fileDropdown').val())", style = "display:inline;" }) 
    </div> 
    <!--Removed code for a button row here--> 
</div> 

JavaScript:

$("select").chosen(); 

$("#deleteControl").dialog({ 
    autoOpen: false, 
    title: "Remove Documents", 
    modal: true, 
    resizable: false, 
    width: "60%" 
}); 

Вынесено HTML:

<!--Removed unrelated code--> 
<div tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" role="dialog" aria-labelledby="ui-dialog-title-deleteControl" style="outline: 0px; left: 319px; top: 421.5px; width: 60%; height: auto; display: block; z-index: 1002;"> 
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-deleteControl">Remove Documents</span><a class="ui-dialog-titlebar-close ui-corner-all" role="button" href="#"><span class="ui-icon ui-icon-closethick">close</span></a> 
</div> 
<div class="ui-dialog ui-dialog-content ui-widget-content" id="deleteControl" style="width: auto; height: auto; min-height: 100px;" scrolltop="0" scrollleft="0"> 
    <div class="mws-form-cols clearfix"> 
     <label>Select a document to delete:</label> 
     <select name="fileName" id="fileDropdown" style="display: none;" onchange="$('#deleteDocName').val($('#fileDropdown').val())"> 
      <option value=""></option> 
      <option value="Modal Test">Modal Test</option> 
      <option value="Second Rename">Second Rename</option> 
      <option value="Test">Test</option> 
      <option value="Inner Test">Inner Test</option> 
     </select> 
     <div title="" class="chosen-container chosen-container-single" id="fileDropdown_chosen" style="width: 389px;"><a tabindex="-1" class="chosen-single chosen-default"><span> </span><div><b></b></div></a> 
      <div class="chosen-drop"> 
       <div class="chosen-search"> 
        <input type="text" autocomplete="off"> 
       </div> 
       <ul class="chosen-results"> 
        <li class="active-result" data-option-array-index="1">Modal Test</li> 
        <li class="active-result" data-option-array-index="2">Second Rename</li> 
        <li class="active-result" data-option-array-index="3">Test</li> 
        <li class="active-result" data-option-array-index="4">Inner Test</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</div></div> 

Answer 1

Нам действительно нужно увидеть код.

Но если вы посмотрите на эту скрипту http://jsfiddle.net/lharby/bvfuLp3z/ Я ограничил высоту родительской обертки, и выпадающее растение простирается ниже нее (конечно, в Chrome).

CSS:

.wrapper { 
    background:powderBlue; 
    height:50px; 
} 

HTML:

<select id="actionInput01" name="action"> 
         <option value="">Go to</option> 
         <option value="ViewTransactions">View transactions</option> 
         <option value="MyPayees">Pay or view existing payees</option> 
         <option value="SetUpANewPayment">Set up a new payment</option> 
..... etc 

EDIT

Там может быть проблема с переполнением скрытые, потенциально, но если это решение не работает, я думаю, абсолютное позиционирование также может помочь, но, как я уже говорил, вам нужно поделиться каким-то кодом.

Answer 2

да это можно проверить скрипку. https://jsfiddle.net/nileshmahaja/aj2ra56q/

HTML

<div class="ui-dialogue"> 

    <select> 
     <option>Option</option> 
     <option>Option</option> 
     <option>Option</option> 
     <option>Option</option> 
     <option>Option</option> 
     <option>Option</option> 
     <option>Option</option> 
    </select> 
</div> 

CSS

.ui-dialogue { 
    width:400px; 
    height:100px; 
    background:#999; 
    border:solid 1px #000; 
} 

В этом случае вам нужно, чтобы обеспечить высоту починки к обертке. может быть, случай, когда ваш обертер div имеет переполнение: скрытое свойство получает применение через CSS, не забудьте изменить его на переполнение: видимо.