adam
adam

Reputation: 685

bootstrap vue radio button

I would like to 1) make sure radio buttons are aligned to left 2) decrease the amount of vertical space between label and radio button texts and vertical space between each text

In the example below you can see radio button texts are centered, and also there is about half text height space between them which I would like to decrease

https://codesandbox.io/s/1l3yc9?file=/index.js

Upvotes: 0

Views: 1052

Answers (3)

moe_rayo
moe_rayo

Reputation: 101

To prevent the radio buttons from getting centered, remove the class class="form-inline" from your <b-form-group></b-form-group>.

It will adjust the texts accordingly.

So you should have something like this:

  <b-form-group
    label="Order type"
    v-slot="{ ariaDescribedby }"
    label-align="left"
  >
    ...
  </b-form-group> 

Upvotes: 0

yoduh
yoduh

Reputation: 14739

Adding to the previous answer to fully answer your question, the label of the radio button can be left aligned using bootstrap's flex class names:

<b-form-radio
        v-model="orderType"
        :aria-describedby="ariaDescribedby"
        name="radios-stacked"
        value="L"
        class="d-flex justify-content-start"
        >Limit</b-form-radio
      >

link to completely working CodeSandbox

Upvotes: 1

Rok Benko
Rok Benko

Reputation: 23128

Here you go...

  1. I don't understand what you're trying to achieve. Can you explain please?

  2. Add the following CSS:

Reduce the vertical space between the label and the first radio button:

legend#__BVID__6__BV_label_,
legend#__BVID__12__BV_label_ {
  padding-bottom: 0;
}

Reduce the vertical space between the two radio buttons:

.custom-control {
  min-height: initial;
}

.custom-control-label {
  line-height: 1.1;
}

.custom-control-label::before,
.custom-control-label::after {
  top: 1px;
}

See the forked CodeSandbox here.

Upvotes: 1

Related Questions