Increasing the width of the autocomplete extender list

I have an ASP.NET AJAX autocomplete extender with CompletionListCssClass=autocomplete_completionListElement :

.autocomplete_completionListElement 
{   
    width:500px;
    margin : 0px!important;
    background-color : inherit;
    color : windowtext;
    border : buttonshadow;
    border-width : 1px;
    border-style : solid;
    overflow :auto;
    height : 200px;
    text-align : left; 
}

But for some odd reason the width of the auto complete list always takes up the width of the textbox even when I set the width to 500px. Is there a way to fix this?

Answers


I finally figured it out. I used the OnClientPopulated="onListPopulated" property as follows:

function onListPopulated() {

        var completionList = $find("AutoCompleteEx").get_completionList();
        completionList.style.width = 'auto';
}

I believe you can also accomplish this by changing

width:500px;

to

width:500px!important;

Tim Mackey expounds more in this blog post. Basically you have to use !important to override the CSS spit out by the control itself.


You need to set the min-width to 500px


Need Your Help

fast similarity detection

algorithm time-complexity similarity metric

I have a large collection of objects and I need to figure out the similarities between them.

Error in Javascript: Object not defined

javascript

I have following Html file with javascript. This gives me error that "testCircle is undefined." kinldy help me resolve this.