title: control height of ajax toolkit autocomplete in asp.net(vb)
body: <p>i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code</p>
  
  <pre><code>&lt;tr&gt;
      &lt;td valign="top" align="right"&gt;
        &lt;asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"&gt;&lt;/asp:Label&gt;
      &lt;/td&gt;
      &lt;td valign="top" align="center" class="style2"&gt;
        &lt;asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"&gt;&lt;/asp:Label&gt;
      &lt;/td&gt;
      &lt;td valign="top" align="left"&gt;
        &lt;asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"&gt;&lt;/asp:TextBox&gt;
      &lt;div id="divwidth1"&gt;
      &lt;/div&gt;
  
  &lt;ajaxToolkit:AutoCompleteExtender ID="autoComplete1" runat="server" EnableCaching="true"
      BehaviorID="AutoCompleteEx" MinimumPrefixLength="1" TargetControlID="txtPayableAccount"
      CompletionListElementID="divwidth1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList"
      CompletionListHighlightedItemCssClass="AutoExtenderHighlight" ServicePath="AutoComplete.asmx"
      ServiceMethod="GetCompletionListPayableAccount" CompletionSetCount="20" CompletionInterval="1"
      DelimiterCharacters=";, :" ShowOnlyCurrentWordInCompletionListItem="false"&gt;
  &lt;/ajaxToolkit:AutoCompleteExtender&gt;
  
  &lt;asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
      ErrorMessage="Required !" ControlToValidate="txtSupplierType"&gt;
  &lt;/asp:RequiredFieldValidator&gt;
  &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>and this is the css code for the autocomplete layout</p>
  
  <pre><code>.AutoExtender
  {
      font-family: Verdana, Helvetica, sans-serif;
      font-size: .8em;
      font-weight: normal;
      border: solid 1px #006699;
      line-height: 20px;
      padding: 10px;
      background-color: White;
      margin-left: 10px;
      max-height:180px;
  }
  .AutoExtenderList
  {
      border-bottom: dotted 1px #006699;
      cursor: pointer;
      color: Maroon;
  }
  .AutoExtenderHighlight
  {
      color: White;
      background-color: #006699;
      cursor: pointer;
  }
  #divwidth1
  {
      width: auto !important;
      height:180px !important;
  }
  #divwidth1 div
  {
      width: auto !important;
  }
  </code></pre>
  
  <p>i have design the layout so that the height of autocomplete frame is 180px, but the list wouldn't do the same, here is the snapshot</p>
  
  <p><img src="https://i.stack.imgur.com/cE4VF.jpg" alt="enter image description here"></p>
  
  <p>can anybody help me?</p>