Блог

Я пытаюсь отобразить выпадающий список поверх внешнего div, но внешний div закрывает выпадающий список?

Обычный html select работает хорошо, но выбранный-select плохо отображает выпадающий список…..

Демонстрационная скрипка: скрипка

 $(function(){
    $(".chosen-select").chosen();
})
 

HTML :

   <div style="height:150px;width:250px;overflow-y:auto;overflow-x:hidden;margin:20px;background: gray;">
    <table>
        <tbody>
            <tr>
                <td>
                    <select  style="width: 200px; ">
                         <option value="0"></option>
                         <option value="1">One</option>
                         <option value="2">Two</option>
                         <option value="3">Three</option>
                    </select>
                </td>
            </tr>
           .
           .
       </tbody>
   </table>
  </div>
 

ВАУ, спустя 5 лет все еще не получил ответа?

используйте этот код и добавьте ширину в поле выбора.

  $(".chosen-select").chosen({width: "95%"});
 

решит вашу проблему.

Это потому, что выбранный отображает ваш выпадающий список в divs и sub divs. Убедитесь, что вы установили для свойства overflow всех родительских контейнеров значение ‘visible’ .

Обычный html select работает здесь из-за собственного поведения html

Попробуйте это

     $('.chosen-select').on("chosen:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });