How to get horizontal scroll bar in select box in IE?

Question

I try to implement the following code

<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>

The right part of the 4th option menu is missing, Can anyone tell me make the horizontal scroll work in the IE, if not, is there any other ways that could get it work, thank you!

sorry for any confusion, what i want is that a horizontal scroll bar in the drop down box, I want it fixed width 100px; but I want to display the whole content, I assume user can scroll to the right if they want to see the whole sentence in the drop down select box,

Solution 1

I’m not really sure what you’re trying to achieve. This is simply a select list. Just remove your styling and it will automatically size to your contents.

EDIT

Make the container that contains the list scroll. Note: the usability of this is somewhat questionable so I would look for another solution prior to implementing something like this on a page.

<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;
}

Solution 2

try it with 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>