The default behavior of completion list takes width equal to the width of textbox. we can change this behavior by applying some CSS style to set the width we want. default width is as shown below in the Image.
As obvious from the image above , width of completion list is equals to the width of textbox, to fix this issue write the CSS script mentioned below in Head section of html source of page.
<head runat="server">
<title>Progress Image in AutoComplete TextBox</title>
<style>
.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;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
#divwidth
{
width: 150px !important;
}
#divwidth div
{
width: 150px !important;
}
</style>
</head>
Now Put a div with id "divwidth" above the html source of autocomplete extender
<div ID="divwidth">div>
and add this line in autocomplete extender HTML source
CompletionListElementID="divwidth"
The complete html source of AutoComplete Extender will look like
<asp:TextBox ID="txtAutoComplete" runat="server" Width="252px"></asp:TextBox> <div ID="divwidth"></div><ajaxToolkit:AutoCompleteExtender runat="server" ID="AutoComplete1" BehaviorID="autoComplete" TargetControlID="txtAutoComplete" ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionInterval="10" EnableCaching="true" CompletionSetCount="12" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass ="AutoExtenderHighlight" CompletionListElementID="divwidth"><ajaxToolkit:AutoCompleteExtender>
No comments:
Post a Comment