In this article I will explain with an example, how to adjust width of DropDownList dynamically using JavaScript in ASP.Net.
 
 
HTML Markup
The following HTML Markup consists of an ASP.Net DropDownList with some ListItem.
The DropDownList is assigned with a JavaScript onmouseover function.
<asp:DropDownList ID="DropDownList1" runat="server" Width="75px" onmouseover="AdjustWidth(this)">
    <asp:ListItem Text="Mumbai" Value="1"></asp:ListItem>
    <asp:ListItem Text="Delhi" Value="2"></asp:ListItem>
    <asp:ListItem Text="Chandigarh City" Value="3"></asp:ListItem>
</asp:DropDownList>
 
 
Adjusting width of DropDownList using JavaScript
When mouse is hovered on DropDownList, the AdjustWidth JavaScript function is called.
Inside this JavaScript function, a loop will be executed over the items of DropDownList and the maximum Text length is determined.
Finally, the width is set to the DropDownList.
<script type="text/javascript">
    function AdjustWidth(ddl) {
        var maxWidth = 0;
        for (var i = 0; i < ddl.length; i++) {
            if (ddl.options[i].text.length > maxWidth) {
                maxWidth = ddl.options[i].text.length;
            }
        }
        ddl.style.width = maxWidth * 7 + "px";
    }
</script>
 
 
Screenshot
Adjust width of ASP.Net DropDownList dynamically using JavaScript
 
 
Browser Compatibility

The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads