control height of ajax toolkit autocomplete in asp.net(vb)

Question

i have text box and i want it when i start typing the autocomplete will show the suggestion. this is my html code

<tr>
    <td valign="top" align="right">
      <asp:Label ID="labelPayableAccount" runat="server" CssClass="ItemTitle" Text="Payable Account"></asp:Label>
    </td>
    <td valign="top" align="center" class="style2">
      <asp:Label ID="labelPayableAccountColon" runat="server" CssClass="ItemTitle" Text=":"></asp:Label>
    </td>
    <td valign="top" align="left">
      <asp:TextBox ID="txtPayableAccount" runat="server" Width="400px" CssClass="textBoxString"></asp:TextBox>
    <div id="divwidth1">
    </div>

<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">
</ajaxToolkit:AutoCompleteExtender>

<asp:RequiredFieldValidator ID="RequiredFieldValidatortxtPayableAccount" runat="server"
    ErrorMessage="Required !" ControlToValidate="txtSupplierType">
</asp:RequiredFieldValidator>
</td>
</tr>

and this is the css code for the autocomplete layout

.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;
}

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

can anybody help me?

Answer 1

Perhaps try adding the overflow css property?

#divwidth1
{
    width: auto !important;
    height:180px !important;

    **overflow: hidden;**
}