html – Align check boxes on the same row using bootstrap 3-ThrowExceptions

Exception or error:

I am using bootstrap 3 modal, where i am generating checkboxes dynamically . It works fine. I need to align the checkboxes on the same row. So i have used

 <div class="row" >                           
     <div   ng-repeat="item in selectedFields">
          <md-checkbox ng-model="checkbox"  class="col-xs-12" aria-label={{item.name}}>
          {{item.name}}
     </md-checkbox>
     </div>
  </div>

enter image description here

How to solve:

I think the problem is with the class which you have used in the md-checkbox tag. You have provided class="col-xs-12" as the class and then it will allocate the entire row to display that specific component. Update the class to col-xs-3 (4 in a row) or col-xs-4 (3 in a row) and you will get it inline.

Apart from that, there is another approach you can use to get it working.

Following is a simple form-input example, and you can update it according to your requirements.

<div class="container">
  <h2>Form control: inline checkbox</h2>
  <form>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 1
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 2
    </label>
    <label class="checkbox-inline">
      <input type="checkbox" value="">Option 3
    </label>
  </form>
</div>

Hope it works

Good luck!

###

was it because you were using col-xs-12 instead of col-xs-4

<div class="row" >                           
 <div   ng-repeat="item in selectedFields">
      <md-checkbox ng-model="checkbox"  class="col-xs-4" aria-label={{item.name}}>
      {{item.name}}
 </md-checkbox>
 </div>

Leave a Reply

Your email address will not be published. Required fields are marked *