css - jquery chosen handling overlapping issue with position absolute -
i have fixed container in showing form elements , select element stylized jquery chosen. problem need show drop-down area of chosen above container, need set .chosen-container {position: absolute}
after setting absolute when fixed area scrolled chosen remained @ fixed location. how 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>
Comments
Post a Comment