I want to add horizontal scroll bar in select box.i have tried with div section with following code sample,but

 <div id="topicsInterest_id" style="width:180px;height:280px;overflow-y:hidden;overflow-x:scroll;">

            <select id="topicsinterest" name="topicsinterest" multiple="multiple" style="width:400px;height:270px;" class="inputtxtbox">
             <option> ...</option>
            </select>
 </div> 

but client said that scroll box on the topic list etc the vertical scroller..is out of sight? It should be in view on the right side..

please help how to manage vertical scroll with horizontal scroll bar in select box,something like this

Thanks

I want to add horizontal scroll bar in select box.i have tried with div section with following code sample,but

 <div id="topicsInterest_id" style="width:180px;height:280px;overflow-y:hidden;overflow-x:scroll;">

            <select id="topicsinterest" name="topicsinterest" multiple="multiple" style="width:400px;height:270px;" class="inputtxtbox">
             <option> ...</option>
            </select>
 </div> 

but client said that scroll box on the topic list etc the vertical scroller..is out of sight? It should be in view on the right side..

please help how to manage vertical scroll with horizontal scroll bar in select box,something like this

Thanks

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Oct 1, 2012 at 8:31 Sameek Mishra asked Oct 1, 2012 at 8:15 Sameek MishraSameek Mishra 9,4043131 gold badges9494 silver badges118118 bronze badges 4

• Have you tried to add overflow-y: scroll; overflow-x: hidden; to <select>? However, I'd remend you to post some pictures of how you need to make the layout. – VisioN Commented Oct 1, 2012 at 8:23
• I tried with but it doesn't work with me. – Sameek Mishra Commented Oct 1, 2012 at 8:27
• "how to manage vertical scroll with horizontal scroll bar in select box" this sentence doesn't make sense to me. You want to get rid of scrollbars in select and just rely on scrollbars of div? Is that what you need? – WTK Commented Oct 1, 2012 at 8:32
• I want to rely on scroll bars of div ,but problem is select box,also have vertical scroll-bar,if i used div vertical scroll bar then no sense to use select vertical scroll,if u suggest how to remove select scroll bar then my problem will solve. – Sameek Mishra Commented Oct 1, 2012 at 8:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

see this demo

You just need to remove overflow-y:hidden;overflow-x:scroll; and set it to

overflow:auto;   // show Scroll when Required`  

OR

overflow:scroll;  //if you want to show scroll always

You have set overflow-y: hidden;, which specifies exactly the displayed behaviour (don't show vertical scrollbar).

If you set overflow-y: scroll; it will be visible.