Имеется dropdown, который генерериется при помощи js. Проблема в том, что если содержимое пунктов вылазиет за экран, то у body появляется скролл. Как не меняя скрипт (и, следовательно, inline-стили сделать так, чтобы скролл появлялся у самого dropdown'а? При этом необходимо сохранение минимальной ширины, равной ширене select'а (в примере 270, выставляется скриптом).
Я нашёл только способ, в котором требуется перенесение значение 270 на потомка, что требует либо менять скрипт, либо хардкодить значение ширины с тилях. Как этого избежать?
Всё что прописано в inline-стилях вычисляется и устанавливается скриптом. Это нельзя трогать, но можно переопределять при помощи !important
.
http://jsfiddle.net/9wguh7oc/6/
Первые 3 списка - как работает сейчас, следующие 3 - что я хочу получить.
html, body { width: 100%; }
*, *:before { box-sizing: border-box; line-height: 20px; }
ul, li { margin: 0; padding: 0; list-style: none; }
.dropdown-menu.open { border: 1px solid; }
ul { border: none; }
li { padding: 2px 8px; }
li:hover { background: silver; }
li.selected { background: #AFCD70; }
.bootstrap-select .dropdown-menu { float: left; min-width: 100%; }
.bootstrap-select:before { /* Просто для демонмтрации расположения select'а */
position: absolute;
left: 0;
bottom: 100%;
content: "Dropdown (" attr(data-info) ")";
border: 1px solid;
border-bottom: none;
width: 270px;
padding: 2px 8px;
}
#try-to-fix ~ .bootstrap-select {
right: 0;
width: auto !important;
}
#try-to-fix ~ .bootstrap-select .dropdown-menu {
max-width: 100%;
overflow: auto;
}
#try-to-fix ~ .bootstrap-select[style*="width: 270px;"] .dropdown-menu.open { /* Надо убрать! */
min-width: 270px;
}
<div class="bootstrap-select" style="top: 32px; left: 50px; width: 270px; position: absolute;" data-info="хорошо">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>12345</li>
</ul>
</div>
</div>
<div class="bootstrap-select" style="top: 142px; left: 50px; width: 270px; position: absolute;" data-info="хорошо">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>1234567890123456789012345678901234567890</li>
</ul>
</div>
</div>
<div class="bootstrap-select" style="top: 252px; left: 50px; width: 270px; position: absolute;" data-info="плохо - вылазиет за эран">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
</ul>
</div>
</div>
<div id="try-to-fix"></div>
<div class="bootstrap-select" style="top: 362px; left: 50px; width: 270px; position: absolute;" data-info="как было">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>12345</li>
</ul>
</div>
</div>
<div class="bootstrap-select" style="top: 472px; left: 50px; width: 270px; position: absolute;" data-info="как было">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>1234567890123456789012345678901234567890</li>
</ul>
</div>
</div>
<div class="bootstrap-select" style="top: 582px; left: 50px; width: 270px; position: absolute;" data-info="скролл внутри">
<div class="dropdown-menu open" style="max-height: 434px; overflow: hidden; min-height: 60px;">
<ul class="dropdown-menu inner selectpicker" role="menu" style="max-height: 422px; overflow-y: auto; min-height: 60px;">
<li>12345</li>
<li class="selected">12345</li>
<li>1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890</li>
</ul>
</div>
</div>