Jquery autocomplete is being used.On hover over an item in the dropdown list, the item gets highlighted with a different background colour. But if the dropdown has a horizontal scrollbar, on scrolling the highlighted bacground does not extend till the right edge of the box.
How to make sure that the highlighted background will extend all the way to the edge of the autocomplete textbox for each item in the list?
html sample structure
<div id="AutocompleteContainter_div" style="position: absolute; z-index: 9999; top: 86px; left: 1135px;">
<div class="autocomplete-w1 ">
<div class="autocomplete" id="Autocomplete_div" style="max-height: 1200px; width: 245px; display: block;">
<div title="City of Origin,Power Play Goals,Salary" class=""><strong>City</strong> of Origin,Power Play Goals,Salary</div>
<div title="City of Origin,Standing in Conference,Salary" class="selected"><strong>City</strong> of Origin,Standing in Conference,Salary</div>
<div title="City of Origin,Team,Penalty Minutes Served,Salary" class=""><strong>City</strong> of Origin,Team,Penalty Minutes Served,Salary</div>
<div title="City of Origin,Standing in Division,Shots on Net,Salary" class=""><strong>City</strong> of Origin,Standing in Division,Shots on Net,Salary</div>
<div title="City of Origin,Position,Penalty Minutes Served,Salary" class=""><strong>City</strong> of Origin,Position,Penalty Minutes Served,Salary</div>
<hr class="line"><font color="#B9B9B9" size="1"> <b>Columns</b></font><div title="CITY" class=""><strong>CITY</strong></div>
<div title="City of Origin"><strong>City</strong> of Origin</div>
</div>
</div>
</div>
css
.autocomplete-w1 {
background:no-repeat bottom right;
position:absolute;
top:0px;
left:0px;
margin:8px 0 0 6px; /* IE6 fix: */ _background:none; _margin:0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size:11px;color: #333;
}
.autocomplete {
border:1px solid #999;
background:#FFF;
cursor:default;
text-align:left;
max-height:350px;
overflow:auto;
margin:-6px 6px 6px -6px; /* IE6 specific: */ _height:350px; _margin:0; _overflow-x:hidden;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size:11px;color: #333;
}
.autocomplete .selected {
background:#B8B8B8;
}
.autocomplete div {
padding:2px 5px;
white-space:nowrap;
}
.autocomplete strong { font-weight: bold;
color: #000;
background-color: #fff6e1; }
.autocomplete .line {
border-top: 1px solid #ffffff;
border-bottom: 1px solid #6D7B8D;
height: 2px;
margin: 4px 0px;
text-align: center;
padding: 0px;
line-height: 2px;
}
I understand your issue. In this case as you set width 245 to the div “autocomplete”, the child divs have only this width.
But we need to get the full width of the content(max). So for this, I have added one div before the inner divs and set “display:inline-block” to get the width of the content(max).
I have modified your code and it is working now.
You can check it here : http://jsfiddle.net/pitchaip/6uqTJ/3/