Increase the Width of a Dropdown List

Question

How can I increase the width of a DropDownList in ASP.NET?

Answer 1

I suggest you to use a dynamic width, like this:

<script type="text/javascript">
    function autoWidth()
    {
        var maxlength = 0;
        var mySelect = document.getElementById('Select1');
        for (var i=0; i<mySelect.options.length;i++)
        {
            if (mySelect[i].text.length > maxlength)
            {
                maxlength = mySelect[i].text.length;
            }
        }
        mySelect.style.width = maxlength * 10;
    }
</script>

And use it like this: onclick="autoWidth()"

Answer 2

You can do this in a .CSS file, inline or with a STYLE tag. You can also do it in the code-behind by setting attributes(DropDownList1.Attribute.Add("style","etc...")).

CSS:

.ChangeWidth
{
    width:400px;    
}

Markup:

<asp:DropDownList ID="DropDownList1" CssClass="ChangeWidth" runat="server">
</asp:DropDownList>

Answer 3

<asp:DropDownList ID="DropDownList1" width="50px" runat="server"> 
</asp:DropDownList>