SixfootJames SixfootJames - 12 days ago 4
CSS Question

Horizontal scrollbar not working on select tag

I am trying to set the horizontal scrollbars on a select tag which is not working.

Here's the code:

<select style="height: 250px; width: 300px; overflow: auto;"
id="dnn_ctr459_ManageRelatedProducts_lstFrom" multiple="multiple"
name="dnn$ctr459$ManageRelatedProducts$lstFrom" class="selectList" size="4">
<option value="9">33 Uithoeke</option>
<option value="10">Aantekeninge by Koos Prinsloo</option>
<option value="11">Aantekeninge by Koos Prinsloo (enhanced e-book)</option>
<option value="12">Access to Social Security</option>
<option value="13">Angling for Interpretation</option>
</select>

.selectList
{
height: 250px;
overflow: auto;
width: 300px;
}


enter image description here

Matt's solution results in this:
enter image description here

Final result in FFenter image description here

Final result in IE, thanks to Matt!enter image description here

Answer

Not sure if you can do that, but you can always trick it into looking like that by placing a div around the select, and setting the width and horizontal scroll on that. Taken from here.