CODEWITHSUNDEEP
asp.netasp.net-mvctwitter-bootstraptwitter-bootstrap-3
Sperick
Sperick

Reputation: 2761

Bootstrap: match checkbox with dropdown menu

I want to match up a checkbox with dropdown menu in my ASP.Net MVC application(the checkbox will enable/disable the dropdown). I tried to alter the code on the official bootstrap site that shows how to match a checkbox with an input box to fit my own needs. This didn't really work out though.

My html looks like this:

<div class="row">
                    <div class="col-md-3">
                        @Html.LabelForConfig(model => model.CompanyPkid)
                    </div>
                    <div class="col-lg-9">
                        <div class="input-group">
                            <span class="input-group-addon">
                                @Html.CheckBoxFor(model => model.IsSCompanyForPush)
                            </span>
                            @Html.DropDownListFor(model => model.CompanyPkid, Model.SelectOptions.CompanyPkidList)
                        </div><!-- /input-group -->
                    </div><!-- /.col-lg-6 -->
                </div>

This give the following result: enter image description here

How can I fix this up to make it look cleaner?

Upvotes: 1

Views: 158

Answers (1)

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

To apply the bootstrap input style you need to give the dropdown the form-control class:

@Html.DropDownListFor(model => model.CompanyPkid, Model.SelectOptions.CompanyPkidList, new { @class = "form-control" })

Upvotes: 2

Related Questions