@Html.DropDownList width

Question

Q: How to set width for @Html.DropDownList (and not in css)?

@Html.DropDownList("ListId", String.Empty, new {style="width: 250px;"})  @* no go!*@

Answer 1

The second argument of the DropDownList helper must be an IEnumerable<SelectListItem>. You are passing a string (an empty one to be more precise). So in order to use this helper you will have to respect its signature:

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

Obviously generating an empty dropdown list is of little use. You probably have a view model (you should by the way) that you want to use to bind to:

@Html.DropDownList(
    "ListId", 
    Model.MyList, 
    new { style = "width: 250px;" }
)

and of course because you have a view model you should prefer to use the DropDownListFor helper:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { style = "width: 250px;" }
)

and finally to avoid cluttering your HTML with styles you should use an external CSS:

@Html.DropDownListFor(
    x => x.ListId, 
    Model.MyList, 
    new { @class = "mycombo" }
)

where in your external CSS you would define the .mycombo rule:

.mycombo {
    width: 250px;
}

Now you have what I consider a proper code.

Answer 2

There is a jquery technique that allows you to set the width without having to deal with the @Html.DropDownList constructor.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#ListId").width(300);
    });
</script>

Answer 3

You should use the View Model approach. However the lazy way out is just to give the 2nd parameter a null.

@Html.DropDownList("ListId", null, new {style="width: 250px;"})

Answer 4

 @Html.DropDownListFor(model => model.Test,
 new SelectList(new List<YourNamespace.Modelname>(), "Id", "Name"), 
 null, new { @id = "ddlTest", @style="width: 250px;" })