Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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,

like image 862
smith Avatar asked Oct 27 '11 14:10

smith


2 Answers

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;
}
like image 146
Jesse Avatar answered Sep 19 '22 13:09

Jesse


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>
like image 37
Cyrus Avatar answered Sep 18 '22 13:09

Cyrus