Is there a way to add line breaks in b-form-checkbox-group?

Question

I'm currently trying to add line breaks to this Vue Bootstrap form checkbox group. The example that Vue Bootstrap docs (https://bootstrap-vue.js.org/docs/components/form-checkbox/) show how I can create a select all checkboxes group, but they are tightly grouped (without line breaks). Is there a way that I could add a line break within the flavours array to separate each object?

I have tried using v-html on a div tag and load in the flavours array, but it did not have the right outcome. I also tried :style="{marginBottom:'25px'}" and it also didn't work, the entire group of array move up and down the page together. I ran out of ideal after that.

HTML

<template>
  <div>
    <b-form-group>
      <template slot="label">
        <b>Choose your flavours:</b><br>
        <b-form-checkbox
          v-model="allSelected"
          :indeterminate="indeterminate"
          aria-describedby="flavours"
          aria-controls="flavours"
          @change="toggleAll"
        >
          {{ allSelected ? 'Un-select All' : 'Select All' }}
        </b-form-checkbox>
      </template>

      <b-form-checkbox-group
        id="flavors"
        v-model="selected"
        :options="flavours"
        name="flavors"
        class="ml-4"
        aria-label="Individual flavours"
        stacked
      ></b-form-checkbox-group>
    </b-form-group>

    <div>
      Selected: <strong>{{ selected }}</strong><br>
      All Selected: <strong>{{ allSelected }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
  </div>
</template>

JavasScript

<script>
  export default {
    data() {
      return {
        flavours: ['Orange', 'Grape', 'Apple', 'Lime', 'Very Berry'],
        selected: [],
        allSelected: false,
        indeterminate: false
      }
    },
    methods: {
      toggleAll(checked) {
        this.selected = checked ? this.flavours.slice() : []
      }
    },
    watch: {
      selected(newVal, oldVal) {
        // Handle changes in individual flavour checkboxes
        if (newVal.length === 0) {
          this.indeterminate = false
          this.allSelected = false
        } else if (newVal.length === this.flavours.length) {
          this.indeterminate = false
          this.allSelected = true
        } else {
          this.indeterminate = true
          this.allSelected = false
        }
      }
    }
  }
</script>

What are you trying to achieve? Every item is already placed on a new line, when i run your code: https://codepen.io/reijnemans/pen/bGbRVqX?editors=1010 Is the space between the elements not big enough? — dreijntjens, Aug 28 '19 at 18:12
If you want more space between checkboes, place individual `` with a [utility spacing class](https://bootstrap-vue.js.org/docs/reference/spacing-classes) applied to them (i.e. 'mb-2' to set the bottom margin to be a bit bigger) — Troy Morehouse, Sep 04 '19 at 01:34
I want to change the to output each data (i.e., 'Orange,' 'Grape,' 'Apple,' 'Lime,' 'Very Berry') value in one line, then a lot of spacing and then the next value. — dacD, Sep 04 '19 at 15:49

Troy Morehouse · Accepted Answer · 2020-05-13T08:42:22.010

5

Don't use the options array. Render each option as it's own <b-form-checkbox> inside of the <b-form-checkbox> group, and on each <b-form-checkbox> add the class mb-1, mb-2, mb-3, mb-4, or mb-5 (these are margin bottom spacing helper classes).

<b-form-checkbox-group
  id="flavours"
  v-model="selected"
  name="flavours"
  class="ml-4"
  aria-label="Individual flavours"
  stacked
>
  <b-form-checkbox
    v-for="flavour in flavours"
    :value="flavour"
    class="mb-5"
  >
    {{ flavour }}
  </b-form-checkbox>
</b-form-checkbox-group>

edited May 13 '20 at 08:42

answered Sep 05 '19 at 03:27

Troy Morehouse

5,320
1
27
38

not sure if this is a typo or intended, but the group uses `flavors`, while the item uses `flavoUrs`, with a "U". – fedorqui May 11 '20 at 15:49
1

`flavours` is the Canadian/UK/Austrialian/New Zealand proper spelling, while `flavors` is a US bastardization spelling. Most english speaking countries use the `u`, while the US is lazy and leaves the `u` out. Colour, Flavour, Behaviour, Neighbour, etc.(my Canadian Google home just confirmed these spellings) – Troy Morehouse May 13 '20 at 08:38
I see you updated this! Yes, I am aware of this _U_ difference, I was focusing on the programming part, since some variables used the _u_ while others not and made me doubt on whether they were the same or not. Thanks! – fedorqui May 21 '20 at 09:16

Is there a way to add line breaks in b-form-checkbox-group?

1 Answers1