Increasing the width of the autocomplete extender list

Question

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?

Answer 1

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';
}

Answer 2

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.