CODEWITHSUNDEEP
csshtml
Aastha
Aastha

Reputation: 513

Multiple select not showing the complete list

I have a div inside which there is a multiple select list. Div has a fixed height and overflow-y : scroll. When the list has huge values to be displayed, the scrollbar on div is not able to go down after a certain point . However if I try to use mouse down - it is able to scroll down.

Please refer to the markup :

<div id="selectScroll_div" style="margin:-58px 0px 0px 0px">
   <select name="lcLhs" id="lcLhs" size="1480" multiple="multiple">
    <option>.....</option>
   </select>
</div>

In my css I have:

#selectScroll_div {
width: 180px;
height: 140px;
overflow-y: scroll;
overflow-x: scroll;
}

Here is the fiddle :

http://jsfiddle.net/Q8Vqh/3/

Upvotes: 1

Views: 723

Answers (2)

3dgoo
3dgoo

Reputation: 15794

You have 2 sets of scroll bars. One on your div and one on your select. You need to get rid of the need for a scroll bar on your select box.

The reason for the scroll bar on your select is it's size value is less than the amount of options inside it. You need to set size to be equal to the amount of options inside the select (in your example this is 1515).

HTML

<div id="selectScroll_div">
    <select name="lcLhs" id="lcLhs" size="1515" multiple="multiple">
        <option value="699803">AIHI_TREND - this is a very long option</option>
        ...
    </select>
</div>

CSS

#selectScroll_div {
    width: 180px;
    height: 140px;
    overflow: auto;
}

Demo

Upvotes: 1

user2804021
user2804021

Reputation: 161

You just need to change the value of size. You have assigned 1480. Please change it to 7 or less than 7 or you can just remove size from select statement That is the reason. It wont show the selected value till the time it completes its size , which according to your code is 1480. Just change its value and execute again. Good luck

Upvotes: 0

Related Questions