Проблема переполнения с помощью всплывающего элемента/JQuery Chosen

Я использую плагин JQuery Chosen в своей форме. Когда варианты выпадают, создается вертикальная полоса прокрутки.

Я думаю, что понимаю, почему это так: я перемещаю контейнер и использую переполнение в его контейнере, чтобы очистить это поплавок, и это, кажется, виновник. Тем не менее, float и clear имеют первостепенное значение для моего фактического макета, и поэтому я не могу просто убрать их, чтобы приспособить плагин Chosen.

Вот быстрый JS Fiddle, чтобы проиллюстрировать проблему. Я довольно озадачен тем, как решить эту проблему, поэтому заранее спасибо за любые предложения.

http://jsfiddle.net/NmVXV/

CSS:

.container {
    background: #ccc;
    width: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}

HTML:

<div class="container">
    <div class="main">
        <br />
        <div>
            <select class="select-chosen" multiple>
                <option>Option A</option>
                <option>Option B</option>
                <option>Option C</option>
            </select>
        </div>
        <br />
        <br />
    </div>
</div>

css jquery-chosen
person Community    schedule 19.09.2013    source источник
comment
Первоначально я опубликовал неправильный JS Fiddle... извините. Пришлось форкнуть на новый. Пожалуйста, проверьте новую ссылку jsfiddle.net/NmVXV. Исходный пост обновлен.   -  person    schedule 19.09.2013

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны установить высоту элемента div достаточно большой. Для этого вам нужно будет установить высоту всех родителей этого элемента div.

person halkujabra    schedule 19.09.2013
comment
Это не то решение, которое я ищу. Выпадающие варианты должны просто находиться за пределами макета, не вызывая переполнения. - person ; 19.09.2013

arrow_upward
0
arrow_downward

Получил эту работу, изменив мой подход к очистке моих поплавков с использованием переполнения на использование clearfix в контейнере:

http://jsfiddle.net/NmVXV/3/

.container {
    background: #ccc;
    width: 400px;
}
.main {
    float: left;
    width: 100%;
}
.select-chosen {
    display: block;
    width: 100%;
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height: 0;
}
person Community    schedule 19.09.2013