Question

I am having a real weird issue. I have a dropdownlist which has a certain width. I use an Ajax call to populate the dropdownlist and when the dropdownlist is populated it reduces in width. For some reason the size of the dropdownlist changes (size of the dropdownlist reduces) when it is populated with options.

JavaScript:

var serialNumberDropDownList = $("<select></select>");
    serialNumberDropDownList.attr("id","SerialNumberDropDownList_" + index);

    serialNumberDropDownList.addClass("DropDownListStyle");

    serialNumberDropDownList.append($("<option></option>").attr("value", "").text("Please select Serial Number"));


 serialNumberDropDownList.click(function() {

        if ($(this).children().length > 1) return false;        

        populateSerialNumberDropDownList();         

    });


function populateSerialNumberDropDownList() {


    $.ajax(
            {
                type: "POST",
                url: "../SomeWebService",
                dataType: "json",
                data:"{}" ,  
                contentType: "application/json",
                success: function(response) {

                    var data = JSON.parse(response.d);

                    for (i = 0; i < data.length; i++) {

                        serialNumberDropDownList.append($("<option></option>").text(data[i]).val(data[i]));
                    }

                },
                error: function(xhr) {
                    var res = eval("(" + xhr.responseText + ")");
                    alert(res.Message);
                }
            });


}

**CSS:** 

.DropDownListStyle 
{
    font-family:Verdana;
    font-size:10px;
    width:95%;
    min-width: 95%; 
}

Answer 1

Weirdly enough if I do the following then it works perfectly fine and it does change the width of the dropdownlist at all:

 complete: function() {

                serialNumberDropDownList.removeClass("DropDownListStyle");
                serialNumberDropDownList.addClass("DropDownListStyle");

                }