Question

Please see this This Image for a picture of the problem.

I have a div that displays a list under a text field. It is a fake Combo-box, using a text element and JavaScript. The list that appears when someone types should cover the other form elements, but should also make the wrapper div bigger so it doesn’t get cut off. I have only been able to do one or the other.

Here’s The relevant HTML

<td id="EditorMainColumn">
   <div id="EditorPanesWrapper">
      <div style="display: block;"><!-- a Jquery Tools Tab, also the problem div -->
           <div class="EditorFormFieldWrapper">
              <label>My Field</label>
              <input class="EditorInput" name="name">
           </div>
           <br class="ClearBoth"><!-- I don't know if this helps or not -->
           <div class="ComboBoxListWrapper">
              <div class="ComboBoxList">
                  <!-- <a> elements are inserted dynamically here --> 
                 <br class="ClearBoth"><!-- I don't know if this helps or not -->
              </div>
           </div>
           <div><!-- Cover me! -->
              You can't see this 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 do I get the div to expand for the combo-box’s height while still keeping the options list over/above the other form elements?

Answer 1

as i notice using this

EditorPanesWrapper

inside the TD make the size fix,

Try to give an specific width and height in % if you want it to adjust to the content of your page.

Another question why do you need to put it into a table ? you can just use div