CODEWITHSUNDEEP
htmltwitter-bootstrap
Sperick
Sperick

Reputation: 2761

Bootstrap: Checkbox and Textbox not matching up in size

I have a checkbox associated with a text box (the checkbox will enable/disable the textbox). I've used bootstrap to style the two of them, however the textbox is not as vertically large as the checkbox's surrounding grey box (as can be seen in the attached screenshot)

enter image description here

My code is as follows:

                   <div class="row">
                        <div class="col-md-3">
                            @Html.LabelForConfig(model => model.PushRetroActivityDays)
                        </div>
                        <div class="col-md-9">
                            <div class="input-group">
                                <span class="input-group-addon">
                                    @Html.CheckBoxFor(model => model.IsRetroActivityDaysForPush)
                                </span>
                                @Html.EditorFor(model => model.PushRetroActivityDays)

                            </div><!-- /input-group -->
                        </div><!-- /.col-md-9 -->
                    </div>

How can I make the two match up (ideally I'd like to make the text box vertically larger rather than shrinking the grey box surrounding the checkbox)

Upvotes: 0

Views: 335

Answers (1)

sheshadri
sheshadri

Reputation: 1217

like this way...DEMO

<form class="form-inline">
  <div class="form-group">
    <div class="row">
      <div class="col-lg-6">
        <label for="exampleInputName2">Name</label>
          <div class="input-group">
           <span class="input-group-addon">
           <input type="checkbox" aria-label="..."/>
           </span>
           <input type="text" class="form-control" aria-label="..."/>
          </div>
      </div>
     </div>
    </div>
   </form>

Upvotes: 1

Related Questions