Setting width of MVC HTML helper DropDownList ! [@HTML.DropDownList]

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 !