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:
DropDownList – For displaying data.
The DropDownList consists of three ListItem.
The DropDownList is assigned with a
JavaScript onmouseover event handler.
<asp:DropDownList ID="ddlCities" 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 the
AdjustWidth JavaScript function, a FOR 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
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
