CODEWITHSUNDEEP
vuetify.js
Thorvald
Thorvald

Reputation: 665

Splitting checkboxes

I got a loop which is outputting some dynamic data and printing out around 10 checkboxes. I can't seem to figure out how to make sure that the height is fixed so that they continue on the next column. Tried setting height and experimenting with multiple props but to no avail. Do I have no choice but to add multiple forloops that work with different columns?

 <v-container>
      <v-row>
        <v-col lg="4">
          
          <v-checkbox
            v-for="(checkbox, index) in allCompanies"
            :key="checkbox.id"
            v-model="companies[index]"
            :label="checkbox.name"
            :value="checkbox.id"></v-checkbox>
        </v-col>
      </v-row>
      <v-row
        ><v-btn color="primary" @click="submitCompanies">Submit</v-btn></v-row
      >
    </v-container>

enter image description here

Upvotes: 1

Views: 298

Answers (1)

Anees Hameed
Anees Hameed

Reputation: 6554

Lot of thanks. So, the answer is that you need to put loop on the column so that checkbox gets arranged in the same row and when ever the total column value exceeds 12pts then the checkbox will be placed on to next row.

<v-container>
  <v-row>
    <v-col lg="4" 
      v-for="(checkbox, index) in allCompanies"
      :key="checkbox.id">
      <v-checkbox
        v-model="companies[index]"
        :label="checkbox.name"
        :value="checkbox.id">
      </v-checkbox>
    </v-col>
  </v-row>
  <v-row>
    <v-btn color="primary" @click="submitCompanies">Submit</v-btn>
  </v-row>
</v-container>

Plus: you can even change the column width for diffrent screen sizes and the same effect can be obtained. For eg: if you need only 2 check box in a row in the screen is medium and if large then 3 check boxes then then give such as

<v-col md="6" lg="4"
  v-for="(checkbox, index) in allCompanies"
  ...

Upvotes: 1

Related Questions