Apply a bootstrap class to my Html.DropDownListFor have made my dropdown list too huge

Question

I am working on an asp.net mvc web application, and i wrote the following inside my razor view, where i add form-control class to my Html.DropDownListFor:-

<div class="form-group">
<label >Account </label> @Html.DropDownList("CustomerList", new SelectList(ViewBag.AllCustomers, "CustomerID", "Name",Model.currentfiltercustomer), "<< All Customers >>",new { @class = "form-control" } ) </div>

here is the markup generated :-

<div class="form-group">
<label >Account </label> <select class="form-control" id="CustomerList" name="CustomerList"><option value="">&lt;&lt; All Customers &gt;&gt;</option>

<option value="10">AccountTest</option>
<option value="11">Customer 200</option>
<option value="12">CustomerNew</option>
<option value="13">customerOne</option>
<option value="14">Dummy Account</option>
<option value="15">My Org Inc</option>
<option value="16">new 123</option>

<option value="18">test new account name</option>
</select> </div>

but the result was not very plesunt as follow, where the dropdownlist almost occupy the whole page:-

Answer 1

The .form-control class has a width of 100%. You can wrap your select in a grid column to enforce the desired width. Here's the relevant section from the Bootstrap 3 docs. Or, even easier (but less flexible), you can explicitly set the width on the element. For example:

@Html.DropDownList("CustomerList", new SelectList(ViewBag.AllCustomers, "CustomerID", "Name",Model.currentfiltercustomer), "<< All Customers >>",new { @class = "form-control", style="width:200px" } )