AutoCompleteExtender TextBox CompletionList Width Ajax ASP.NET
In this example i am going to describe how to set Width of Completion List in Ajax AutoComplete Extender TextBox.
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.
To read how to implement AutoComplete extender TextBox in GridView , go through link below
Ajax AutoComplete Extender Textbox in Edit mode of GridView
To read how to Add Progress Image in AutoComplete TextBox, go through link mentioned below
Progress Image in Ajax AutoComplete TextBox
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
The code in bold is setting the width of completion list, you can change the dimensions according to your needs.
Now Put a div with id "divwidth" above the html source of autocomplete extender
and add this line in autocomplete extender HTML source
The complete html source of AutoComplete Extender will look like
And this is how the AutoComplete TextBox will look like
Hope this helps
In this example i am going to describe how to set Width of Completion List in Ajax AutoComplete Extender TextBox.
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.
To read how to implement AutoComplete extender TextBox in GridView , go through link below
Ajax AutoComplete Extender Textbox in Edit mode of GridView
To read how to Add Progress Image in AutoComplete TextBox, go through link mentioned below
Progress Image in Ajax AutoComplete TextBox
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>
And this is how the AutoComplete TextBox will look like
Hope this helps
0 comments:
Post a Comment