CODEWITHSUNDEEP
htmlcssangularjs
Akash Veer
Akash Veer

Reputation: 180

display checkboxes in grid format

I want to display check boxes in grid format having 3 columns. Something like below

Item1 Item2 Item3
Item Item5 Item6
4
Item7 Item8 Item9

I am able to display it in grid format with the below code but in case of Item7, instead of positioning correctly, it starts displaying it below Item5. Which I don't want to.

Below is the code which I am using

<div class="row" style="margin-top: 15px; padding-bottom: 15px; margin-left: 5px">
 <div class="col-md-4 ef-batch-options-text checkbox" ng-repeat="x in samples">
       <input type="checkbox" id="user" name="users" value="{{x}}"  />
             {{x}}
 </div>

I have also tried replacing div with ul and <li but still the same result. Please let me know what I am missing.

Upvotes: 2

Views: 4463

Answers (3)

Zach Jensz
Zach Jensz

Reputation: 4063

You can use flexbox Note that you should avoid using inline styles! Create a style.css file, link it with<link rel="stylesheet" href="style.css"> and paste in the following code:

.row {
margin-top: 15px;
padding-bottom: 15px;
margin-left: 5px
display: flex;
flex-wrap: wrap;
flex-basis: 33%;
}

Upvotes: 0

ksav
ksav

Reputation: 20821

form {
  width: 60px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
<form>
  <label>
    <input type="checkbox" value=""/>item1
  </label>
  <label>
    <input type="checkbox" value=""/>item2
  </label>
  <label>
    <input type="checkbox" value=""/>item3
  </label>
  <label>
    <input type="checkbox" value=""/>item4
  </label>
  <label>
    <input type="checkbox" value=""/>item5
  </label>
  <label>
    <input type="checkbox" value=""/>item6
  </label>
  <label>
    <input type="checkbox" value=""/>item7
  </label>
  <label>
    <input type="checkbox" value=""/>item8
  </label>
  <label>
    <input type="checkbox" value=""/>item9
  </label>
</form>

Upvotes: 1

Rayees AC
Rayees AC

Reputation: 4659

Try Bootstrap grid method,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item1
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item2
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item3
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item4
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item5
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item6
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item7
 </div>
 <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item8
 </div>
  <div class="col-4 text-center">
   <input type="checkbox" id="user" name="users" value=""/>item9
 </div>
</div>

Upvotes: 0

Related Questions