Take a look at this image to see the issue visually.
I'm facing a problem with a div that contains a list displayed below a text field. It's essentially a simulated Combo-box that uses a text element and JavaScript. The issue is that when someone types, the list should cover the other form elements and simultaneously expand the wrapper div to prevent it from getting cut off. However, I can only achieve one of these functionalities at a time.
Here's a glimpse of the relevant HTML:
<td id="EditorMainColumn">
<div id="EditorPanesWrapper">
<div style="display: block;"><!-- Jquery Tools Tab, which is also the problematic div -->
<div class="EditorFormFieldWrapper">
<label>My Field</label>
<input class="EditorInput" name="name">
</div>
<br class="ClearBoth"><!-- Unsure if this is relevant -->
<div class="ComboBoxListWrapper">
<div class="ComboBoxList">
<!-- Dynamic insertion of <a> elements here -->
<br class="ClearBoth"><!-- Unsure if this is relevant -->
</div>
</div>
<div><!-- Cover me! -->
This section is hidden when the combo box is open...
</div>
</div><!-- END display:block div -->
</div><!-- END EditorPanesWrapper -->
</td>
CSS:
#EditorMainColumn {
overflow:hidden!important;
background:#f9f9f4;
border-top:1px solid black;
padding:20px;
color:#432c01;
}
#EditorPanesWrapper {
width:auto;
margin-right:20px;
overflow:auto;
}
.ComboBoxListWrapper{
position:relative;
top:-10px;
}
.ComboBoxList{
border: 1px solid red;
width:288px;
position:absolute;
z-index:2;
margin-left:180px;
}
.ComboBoxList a {
display:block;
border: 1px solid #DDD7C6;
border-top:0px;
float: left;
padding: 8px;
padding-left:0px;
top:-11px;
color: #432C01;
width:279px;
font-weight: bold;
font-size: 10px;
background:white;
}
How can I adjust the div to expand based on the combo-box's height while ensuring that the options list remains above the other form elements?