Set AutoCompleteExtender TextBox CompletionList Width And Style With CSS Ajax ASP.NET. In this example i am setting 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.
I have also created example to Add Progress Image in Ajax AutoComplete TextBox
In AutoComplete Extender default 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
If you like this post than join us or share
26 comments:
This comment has been removed by a blog administrator.
This is a very good sample
This comment has been removed by a blog administrator.
Thanx a Lot boss ..it solved my Issue..
This comment has been removed by a blog administrator.
Based on Textbox autocompleteExtender how Gridview Rows are Changed
Based on Textbox autocompleteExtender how Gridview Rows are Changed
hi
Thank you for your post.It is very useful.
Thanks for this! :D
Спасибо, классный блог) Даже добавил в закладки, хотя делаю это редко)
i like your skills...
wow really nice article ...
autocomplete extender with progress image
can we do it for a rich textbox in c sharp for a windows form application
Hack again?!
I just found the error -" An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately.
"
Thank you a Lot boss ..it solved my Issue..
I want to add scroll for this texbox how can I do?
can you help on that
Thank you very much for your help
Thanks Alot My problem Regarding Auto TextBox Control Sovled
Hi,
Thanks very much.
You can get scrolling to work with this:
#divwidth
{
width: 700px !important;
height: 200px;
overflow-y:scroll;
overflow-x:hidden;
}
#divwidth div
{
width: 700px !important;
}
Just be sure your TextBox does not have AutoPostBack="true" or the page will fire when you click on the scrollbar.
Really helpfull
I have read your stories but this is my very first time to comment, i love your work
thank you v
Bilal Smadi
Its Working Properly Thank you so much
Thank you so much
TQVM......
This is very nice friend..
Thanqqqqqqq sooooooooo muchhhhhhhh
ya it's a good post for me thanks for this
Post a Comment