AutoCompleteExtender TextBox CompletionList Width Ajax ASP.NET

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.

 AutoCompleteExtender TextBox CompletionList Width And Style With CSS
I have also explained how to implement AutoComplete Extender TextBox In EditItemTemplate Of GridView

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>
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
<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
AutoComplete List Width CSS style


Hope this helps


If you like this post than join us or share

25 comments:

IEDig said...

This comment has been removed by a blog administrator.


Anonymous said...

Thank you


Anonymous said...

This is a very good sample


Anonymous said...

This comment has been removed by a blog administrator.


Anonymous said...

Thanx a Lot boss ..it solved my Issue..


Anonymous said...

This comment has been removed by a blog administrator.


Anonymous said...

Based on Textbox autocompleteExtender how Gridview Rows are Changed


gomathi said...

Based on Textbox autocompleteExtender how Gridview Rows are Changed


Anonymous said...

hi

Thank you for your post.It is very useful.


Anonymous said...

Thanks for this! :D


Anonymous said...

Спасибо, классный блог) Даже добавил в закладки, хотя делаю это редко)


shankar kanase said...

i like your skills...


Rajesh Chekuri said...

wow really nice article ...

autocomplete extender with progress image


Anonymous said...

can we do it for a rich textbox in c sharp for a windows form application


Anonymous said...

Hack again?!


Maria said...

Thanks


Darshana said...

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.
"


Balu said...

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


Anonymous said...

Thanks Alot My problem Regarding Auto TextBox Control Sovled


Anonymous said...

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.


Anonymous said...

Really helpfull


Anonymous said...

I have read your stories but this is my very first time to comment, i love your work


Anonymous said...

thank you v

Bilal Smadi


sriraj said...

Its Working Properly Thank you so much


Vivekanandan Ramachandran said...

Thank you so much


Find More Articles