CODEWITHSUNDEEP
formsvue.jsinlinestacked
iroDEV
iroDEV

Reputation: 11

bootstrapVue radio-button-group are rendered in stacked mode instead in default inline mode

I use bootstrapVue version 2.21.2 with bootstrap version 5.1.3.

This bootstrapVue version in tag default generates inline radio inputs, https://bootstrap-vue.org/docs/components/form-radio#inline-or-stacked-radios

But in my project are generated in stacked mode:

<b-col>
  <b-form-group label="Con quota sociale" v-slot="{ ariaDescribedby }">
    <b-form-radio-group
     v-model="filterQuotaSelected"
     :aria-describedby="ariaDescribedby"
     name="filter-quota">
     <b-form-radio value="">ignora</b-form-radio>
     <b-form-radio value="N">non in regola</b-form-radio>
     <b-form-radio value="S">in regola</b-form-radio>
    </b-form-radio-group>
  </b-form-group>
</b-col>

browser render

How to render inline? Have any idea?

Upvotes: 0

Views: 143

Answers (1)

iroDEV
iroDEV

Reputation: 11

After few step I resolved question.

It is a problem of plugin version .

BootstrapVue v.2.21.x was designed to interoperate with bootstrap v4.5.3, setting up my project folder, the installer, for default, have downloaded last version 5.x of bootstrap which is incompatible.

Step for resolving...

  1. change file "package.json" substituting "bootstrap": "^5.x" in dependencies object with
"dependencies": {
    "bootstrap": "4.5.3",
...
}
  1. in folder project run
npm update

Upvotes: 1

Related Questions