How make li items in scrollable ul to take all width? - html

Question

So basically I have a custom multiple select list which has ul li structure. The issue is that when selecting an element, it is being highlighted, but if you scroll to the right the highlighted part is not filling whole row.
One solution is to assign display: table-row; attribute to each li element, highlighted part fills whole row after that, but the issue is that after adding that rows start to not react when clicking on the white part, they respond only if you click directly on the text.
Here is fiddle: http://jsfiddle.net/KRnxq/1/

Answer 1

You could wrap the ul in a wrapper like so:
<div class="wrapper">
<ul class="files multiple-select MultipleSelectBox vertical" unselectable="on" tabindex="0" style="-webkit-user-select: none;">
....
</ul>
</div>
and then put your box styles onto the wrapper and make the ul display:table like so:
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid #aaa;
/* corner */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.MultipleSelectBox {
display:table;
list-style-type: none;
margin: 0;
padding: 1px 0;
background-color: white;
color: black;
}
Example
EDIT
Here is another version with the following fixes:
no black border creating a click effect when selecting items
better border radius so scrollbars don't remain square
Updated fiddle

Answer 2

you need to add wrapper div and put your UL-li in-the div
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid black;
}
and
.MultipleSelectBox {
width: 200px;
border: 1px solid #aaa;
height: 200px;
list-style-type: none;
margin: 0;
overflow: none;
}