HTML helpers- MVC, HTML helpers are similar to the ASP.NET webform controls.

HTML helpers are light weight but do not have Events and ViewState unlike ASP.NET controls.

Now, coming back to the topic, it is as easy to set the width for a HTML Helper DropDownList as any plain HTML control.

Signature-

@Html.DropDownList("ListId",Enumerable.Empty<SelectListItem>(), new{style="width:250px;"})

• The first argument is the ListId, any relevant string can be provided here.
• The Second argument must be an IEnumerable<SelectListItem> type.
• The third argument can be a new instance of style wherein you can provide style elements like plain HTML.
• If you want a default value for the DropDownList, then the third argument can be given as default value string and fourth argument as the style element.

Example-

Controller

var exampleList= new List<SelectListItem>();

exampleList.Add(new SelectListItem { Text = "Question1", Value = "1" });
exampleList.Add(new SelectListItem { Text = "Question2", Value = "2" });
exampleList.Add(new SelectListItem { Text = "Question3", Value = "3" });

SelectList selectList = new SelectList(exampleList, "Value", "Text");
ViewBag.SelectList = selectList;

View

@Html.DropDownList("Question1", ViewBag.SelectList as SelectList, "-- Select Question --", new { style = "width: 410px;" })

If you have an external CSS class then the following syntax can be used-

@Html.DropDownList("Question1", ViewBag.SelectList as SelectList, "--Select Question--", new {new { @class="cssClass" })

-where “cssClass” should be the name of the class you want to be reflected to the DropDownList.

Please Like, Comment and Share.

Thanks for Checking out !

• Author
• Recent Posts

Abhimanyu

Cloud and DevOps Professional and previously a C# ASP.NET Developer with keen interest in system design and architecture. Currently involved in projects using AWS, Azure, Automation, Monitoring, REST APIs and DevOps. Email: [email protected] / [email protected]

Latest posts by Abhimanyu (see all)

• Switch between multiple proxies in Chrome browser [ProxySwitchy Guide] - February 12, 2016
• CISCO VPN CLIENT -REASON 442: FAILED TO ENABLE VIRTUAL ADAPTER [Fix] - January 31, 2016
• CynogenMod 13 (Android Marshmallow [6.0]) on Samsung Galaxy S3 GT-I9300. [21-12-2015] - December 21, 2015