CODEWITHSUNDEEP
cssvue.jsbootstrap-4bootstrap-vue
MaxMike
MaxMike

Reputation: 137

Align radio button with label where label has inline input with Vue and Bootstrap

I have a form with a radio button group where on of the radio button's labels includes another (number) input.

It looks as follows at the moment, i. e. the radio button is not aligned with the rest of the label. I can't yet get my head around css-spacing, paddings, margins etc and am stuck figuring out which element should get what kind of class to center this. I would greatly appreciate any help.

Sandbox: https://codesandbox.io/s/keen-christian-s7u3c?file=/src/components/HelloWorld.vue

Code:

        <b-form-group label="Radio Buttons with Inline Input">
          <b-form-radio-group stacked v-model="radioValue">
            <div>
              <b-form-radio name="radio1" value="ONE"
                >this is
                <b-form-spinbutton
                  :disabled="radioValue === 'TWO'"
                  v-model="numberValue"
                  size="sm"
                  inline
                ></b-form-spinbutton>
                not aligned
              </b-form-radio>
            </div>
            <b-form-radio name="radio2" value="TWO"
              >this is aligned</b-form-radio
            >
          </b-form-radio-group>
        </b-form-group>

Upvotes: 0

Views: 706

Answers (1)

tony19
tony19

Reputation: 138216

The b-form-spinbutton's height is expanding the height of its parent b-form-radio, which causes the text to be misaligned with the radio icon.

A quick workaround is to shrink the height of the spin button:

<b-form-spinbutton style="height:1.5em">

Upvotes: 2

Related Questions