CODEWITHSUNDEEP
asp.net-mvctwitter-bootstraprazor
Richard
Richard

Reputation: 1739

CSS Class for DropDownListFor

Using scaffolded items in an MVC5 application, I see things like text fields given the CSS class "form-control". The fields all have consistent rounded corners, same font color/size etc.

Now I've added a dropdown list using "@Html.DropdownListFor" and it's square, with a different font colour.

I know I can specify which CSS class to use in the Razor e.g. 

@Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "###########" } })

But I don't know what to replace ########### with. If I specify "form-control" just gives me the square box I described above. "form-control select" doesn't seem to do much either.

Here's a bigger snippet showing a well-styled text field directly above it

        <div class="form-group">
            @Html.LabelFor(model => model.Title, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Title, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Title, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.OrderItemTypeId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.OrderItemTypeId, (SelectList)ViewBag.OrderItemTypes, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.OrderItemType, "", new { @class = "text-danger" })
            </div>
        </div>

Is there a value I can use that will give my dropdown the same appearance as all the other text fields I already have?

Thanks

Upvotes: 0

Views: 2320

Answers (2)

Tieson T.
Tieson T.

Reputation: 21191

The third parameter already is the htmlAttributes field, so your syntax is wrong. This is what you're after:

@Html.DropDownListFor(model => model.OrderItemTypeId, 
    (SelectList)ViewBag.OrderItemTypes, 
    new { @class = "form-control etc" })

See Microsoft Docs.

Upvotes: 2

Art
Art

Reputation: 24567

You need to make sure it sits within proper hierarchy of outer tags with their corresponding classes.

See the code below that I took from this article - How to use Bootstrap 3 validation states with ASP.NET MVC Forms

<div class="row">
    <div class="col-sm-4 col-sm-offset-4">
        <div class="panel panel-default">
            <div class="panel-body">
                @using (Html.BeginForm("UserProfile", "Profile", FormMethod.Post, new { role = "form", id="userForm" })) {

                    @* State selection dropdown *@
                    <div class="form-group">
                        @Html.LabelFor(m => m.State)
                        @Html.DropDownListFor(m => m.State, // Store selected value in Model.State

                                              // This argument needs some explanation - here we take a Distionary<string, string>
                                              // and turn it into an instance of SelectList, see blog post for more details
                                              new SelectList(Model.States, "Key", "Value"),

                                              // Text for the first 'default' option
                                              "- Please select your state -",

                                              // A class name to put on the "<select>"
                                              new { @class = "form-control" }
                                             ) 
                        @Html.ValidationMessageFor(m => m.State)
                    </div>

                    <button type="submit" class="btn btn-primary">Update</button>
                }
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Related Questions