CODEWITHSUNDEEP
c#asp.netasp.net-ajaxautocomplete
Kumar
Kumar

Reputation: 2863

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?

Upvotes: 5

Views: 10008

Answers (3)

rino.batin
rino.batin

Reputation: 419

You need to set the min-width to 500px

Upvotes: 2

Aaron Daniels
Aaron Daniels

Reputation: 9664

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.

Upvotes: 11

Kumar
Kumar

Reputation: 2863

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

Upvotes: 9

Related Questions