CODEWITHSUNDEEP
bootstrap-vue
Brian Kidd
Brian Kidd

Reputation: 143

BootstrapVue input-group with checkbox switch size

I have the following in my template:

<b-form-group
  v-for="(field, i) in fields"
  :key="field.id"
  :id="'field_' + field.id"
  :label="field.label"
  label-cols-sm="4"
  label-cols-lg="3"
  label-size="sm"
 >
   <b-input-group size="sm">
     <b-input-group-prepend is-text>
       <b-form-checkbox switch class="mr-n2"></b-form-checkbox>
     </b-input-group-prepend>
     <b-form-input v-model="fields[i].value"></b-form-input>
   </b-input-group>
</b-form-group>

The control is rendering like this:

enter image description here

The switch is not displayed in size 'sm' because the .customer-control class is being added:

enter image description here

Any suggestion as to how to solve? I've been looking through the documentation but I can't seem to find what I'm missing.

Thanks.

Upvotes: 2

Views: 1012

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Custom styled checks/radios are not officially supported in input-groups with Bootstrap v4.4 CSS, but you can make a few adjustments using utility classes to adjust for this (as mentioned in the BootstrapVue input group docs):

  <b-input-group size="sm">
    <b-input-group-prepend is-text>
      <b-form-checkbox switch class="mr-n2 mb-n1">
        <span class="sr-only">Switch for following text input</span>
      </b-form-checkbox>
    </b-input-group-prepend>
    <b-form-input aria-label="Text input with switch"></b-form-input>
  </b-input-group>

The above sets a negative bottom margin on the custom switch style checkbox.

result

Upvotes: 3

Related Questions