Как получить горизонтальную полосу прокрутки в окне выбора в IE? - PullRequest
Новая
       31

Как получить горизонтальную полосу прокрутки в окне выбора в IE?

6 голосов
/ 27 октября 2011

Я пытаюсь реализовать следующий код 

<div class="functionitem" id="selector_cat">
  <select name="sets" style="overflow:auto;width:100px;">
    <option value="general">happy holiday</option>
    <option value="garden">Garden</option>
    <option value="Lunch">Lunch</option>
    <option value="nice day">A nice day out with my friend on the beach</option>
  </select>
</div>

Правая часть 4-го меню опций отсутствует, может кто-нибудь сказать мне, чтобы горизонтальная прокрутка работала в IE, если нет, есть ли другие способы, которые могли бы заставить его работать, спасибо!

извините за путаницу, я хочу, чтобы горизонтальная полоса прокрутки в раскрывающемся списке имела фиксированную ширину 100px; но я хочу отобразить весь контент, я предполагаю, что пользователь может прокрутить вправо, если он хочет увидеть все предложение в выпадающем списке,

Ответы [ 2 ]

4 голосов
/ 27 октября 2011

Я не совсем уверен, чего вы пытаетесь достичь.Это просто список select.Просто удалите ваш стиль, и он автоматически изменит ваш контент.

РЕДАКТИРОВАТЬ

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

<div id="selector_cat"> 
    <select name="sets">
        <option value="general">happy holiday</option>
        <option value="garden">Garden</option>
        <option value="Lunch">Lunch</option>
        <option value="nice day">A nice day out with my friend on the beach</option>
    </select>
</div>

#selector_cat{
    width: 100px; 
    overflow: auto;
}
3 голосов
/ 29 марта 2014

попробуйте с JQuery: 

<div id='test' style="overflow-x:scroll; width:120px; overflow: -moz-scrollbars-horizontal;">
<select id='mySelect' name="mySelect" size="5">
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
    <option value="1">one two three four five six</option>
    <option value="2">seven eight</option>
    <option value="3">nine ten</option>
</select>
<div id="divv" style='font-size: 1px'>&nbsp</div>
</div>

<script>
    $('#divv').css('width', $('#mySelect').outerWidth());
    $('#mySelect').css('width', $('#test').outerWidth());
    $( "#test" ).scroll(function() {
        $('#mySelect').css('width', $(this).outerWidth() + $(this).scrollLeft());
    });
</script>
...