Bootstrap control-label class causing the check box not to be aligned with the label in the angular application

advertisements

In my angular application, I need the label and the checkbox in different columns. This causes the checkbox to not be aligned with the label(it is slightly higher up and not centered horizontally with the label text 'GROUP')

UPDATE: NOT SURE IF SOMETHING CHANGED WITH JSFIDDLE. IT USED TO SHOW SHOW THE UNALIGMENT BUT IS NO LONGER DOING IT

See here http://jsfiddle.net/LLvmxd0s/7/

    <div class="form-group">
        <label class="col-sm-5 control-label">GROUP</label>
        <div class="col-sm-6">
            <input type="checkbox" ng-model="grp" class="pull-left" ng-true-value="'Y'" ng-false-value="'N'"/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-5 control-label">GROUP</label>
        <div class="col-sm-6 control-label">
            <input type="checkbox" ng-model="grp" class="pull-left" ng-true-value="'Y'" ng-false-value="'N'"/>
        </div>
    </div>

However if I add control-label class to the div which contains the checkbox then the label and checkbox align horizontally to each other nicely. This feels hacky to me though.

Is there a better way to fix this alignment issue?


You are referring to bootstrap 2.3.1 CSS in your fiddle, but are using bootstrap 3.x gridsystem? Anyway, as all the doc examples clears out, you must wrap a checkbox inside a .checkbox parent. Also you should wrap the <div> containing the checkbox inside the <label> element itself. I guess that is the reason for you trying to use the ugly .pull-left.

<div class="form-group">
  <div class="checkbox">
    <label class="col-sm-5 control-label">
      <div class="col-sm-6">
        <input type="checkbox" ng-model="grp" ng-true-value="'Y'" ng-false-value="'N'" />GROUP
      </div>
    </label>
  </div>
</div>

<div class="form-group">
  <div class="checkbox">
    <label class="col-sm-5 control-label">
      <div class="col-sm-6">
        <input type="checkbox" ng-model="grp" ng-true-value="'Y'" ng-false-value="'N'" />GROUP
      </div>
    </label>
  </div>
</div>

http://jsfiddle.net/fjsnnh9g/