I have a fixed container in which I am showing some form elements and also a select element stylized with jquery chosen. The problem is I need to show the drop-down area of chosen above the container, for this I need to set .chosen-container {position: absolute}
but after setting it to absolute when the fixed area is scrolled the chosen remained at fixed location. How to fix it?
css code:
#fixed {
border: 1px solid #000;
width: 300px;
height: 180px;
overflow: auto;
}
.chosen-container {
position: absolute;
}
.txt {
display: block;
margin: 10px 0;
}
html code:
<div id="fixed">
<input class="txt" type="text" value="" />
<input class="txt" type="text" value="" />
<input class="txt" type="text" value="" />
<select class="chos" style="width: 165px">
<option value="1">Val 1</option>
<option value="2">Val 2</option>
<option value="3">Val 3</option>
<option value="4">Val 4</option>
<option value="5">Val 5</option>
<option value="6">Val 6</option>
<option value="7">Val 7</option>
</select>
<input type="text" class="txt" value="" />
<input type="text" class="txt" value="" />
<input type="text" class="txt" value="" />
<input type="text" class="txt" value="" />
</div>