title: ASP.NET ajaxcontroltoolkit autocomplete ul overlay issue
body: <p>I have a following snippet of code in my ASP.NET application (simplified):</p>
  
  <pre><code>&lt;asp:Panel ID="Panel7" runat="server"&gt;
  
  &lt;asp:TextBox ID="RecTextBox" runat="server" autocomplete="off" Height="18px" Width="800px"/&gt;
  
      &lt;ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
                                              CompletionListCssClass="autocomplete_completionListElements" 
                                              CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem" 
                                              CompletionListItemCssClass="autocomplete_listItem" 
                                              CompletionSetCount="20" 
                                              DelimiterCharacters=";, :" 
                                              Enabled="True"
                                              MinimumPrefixLength="2" 
                                              ServiceMethod="GetCompletionList" 
                                              ServicePath="Rec.asmx" 
                                              ShowOnlyCurrentWordInCompletionListItem="True" 
                                              TargetControlID="RecTextBox" /&gt;                                
  
              &lt;br /&gt;                             
          &lt;asp:Button ID="Button3" runat="server"  Text="Add" OnClick="Button3_Click"  /&gt; 
          &lt;asp:Button ID="Button11" runat="server" Text="Remove" OnClick="Button11_Click" /&gt; 
  
  
          &lt;br /&gt;
          &lt;asp:Panel ID="Panel8" runat="server" Height="150"&gt;
              &lt;asp:ListBox ID="ListBox1" runat="server" Width="800" Height="150"&gt;&lt;/asp:ListBox&gt;
          &lt;/asp:Panel&gt;
      &lt;/asp:Panel&gt;
  </code></pre>
  
  <p>Along with CSS classes:</p>
  
  <pre><code>.autocomplete_completionListElements
  { 
      overflow : auto;
      height : 130px;
      list-style-type : none;
  }
  
  /* AutoComplete highlighted item */
  .autocomplete_highlightedListItem
  {
      background-color: #ffff99;
      color: black;
      padding: 1px;
  }
  
  /*  AutoComplete item */
  .autocomplete_listItem 
  {
      background-color : window;
      color : windowtext;
      padding : 1px;
      left :0px
  }
  </code></pre>
  
  <p>The problem is that autocomplete plugin renders an unordered list. It is contained in the document if autocomplete list is visible or not:</p>
  
  <pre><code>&lt;ul id="ContentPlaceHolder2_TabContainer1_TabPanel2_AutoCompleteExtender1_completionListElem" class="autocomplete_completionListElements" style="position: absolute;"&gt;&lt;/ul&gt;
  </code></pre>
  
  <p>When the autocomplete list is visible, there is no problem, because user is able to select desired autocomplete element. In turn autocomplete list is hidden, the unordered list is invisible but overlays multi select HTML controls (because ul has <em>height : 130px;</em>), and there are problems with selecting elements inside the multiselect:</p>
  
  <p>Problem occurs in FF and Opera, but not in IE and Chrome.  </p>
  
  <p>Please for help,</p>
  
  <p>Best regards,
  WP</p>