How to position radio buttons in line with labels containing inline inputs using Vue and Bootstrap

Currently, I am facing an issue with my form containing a radio button group where one of the radio button labels includes another numerical input. The layout is not aligned correctly, and I am struggling to adjust the spacing using CSS.

I am unable to grasp concepts like spacing, paddings, margins, etc., and need help in determining which elements require specific classes for centering purposes. Any assistance would be greatly appreciated.

To view the sandbox, click here: 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>
cssvue.jsbootstrap-4bootstrap-vue

Answer №1

The height of the b-form-spinbutton is causing its parent element, the b-form-radio, to also expand in height, resulting in misalignment between the text and radio icon.

To quickly resolve this issue, you can adjust the height of the spin button as follows:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating aesthetically pleasing and uniform rows of responsive Bootstrap 4 cards with consistent heights

I'm a beginner in the world of design and Bootstrap, so please be patient with me. My goal is to create a series of cards that have equal height and width (responsive, not fixed) in each row. In other words, I want all the cards to be as tall and wid ...

cssbootstrap-4

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

cssreactjsstyled-components

What is the best way to create five equal columns using bootstrap vue?

I found the reference here: My goal is to create 5 columns in 1 row This is my current script: <template> ... <b-row> <b-col cols v-for="club in clubs"> {{club.name}} </b-col> ...

twitter-bootstrapvue.jsvuejs2bootstrap-4vue-component

Choose either immediate offspring or immediate offspring of immediate offspring

I am struggling to create a CSS Selector that follows DRY principles. The selector needs to target elements within a group but not those within a subgroup of the main group. Elements should only be direct children of the main group or wrapped in an addit ...

javascripthtmlcss

Using Vuejs v-for to dynamically display unique data

Clicking on the button allows me to add a component. <button type="submit" @click="components++">add select box</button> <div v-for="component in components"> <select class="selectpicker form-control" v-model="customized_exercise. ...

vue.js

As the screen width shrinks, I've noticed that my grid system in HTML using Bootstrap starts to glitch

Why is my row going onto a second line when I shrink the width? Here is a screenshot of the issue. I am currently using bootstrap 5 for this and I am unsure how to fix it. Below is the code snippet: Current Screenshot Below is the desired look on mobil ...

htmlcssbootstrap-5

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

Display additional text when hovering over an object

Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...

htmlcss

Dynamic expand/collapse animation in React with adjustable height feature

I'm currently working on an Expand component and attempting to implement an expand animation upon toggle without success. I want this animation to be dynamic without explicitly setting the element's height: export const Expand = ({ startOpen, con ...

cssreactjsstyled-components

Enhance the standard input control in Vue.js by extending it to include features such as

Incorporating vue.js: Can you enhance a standard HTML input without the need for a wrapper element? I am interested in customizing a textarea like so: Vue.component('custom-textarea', { data () => { return { } }, template: &apo ...

javascripthtmlvue.jscustom-tag

Could it be that the reason why document.getElementById is undefined in a Vue2 component is due to a misunderstanding

I am currently building a simple chat feature that fetches messages from Firebase and displays them in a div. The objective is to automatically scroll to the bottom of the div WHEN relevantMessages changes, as long as the current scroll position is close ...

htmlvue.jsvuejs2

What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

Is there a way to display two words side by side in React components?

I previously had the following code: projectName: project.get('name') === 'default' ? 'No Project' : project.get('name') In the render() method, it was written like this: <div className='c-card__projects&ap ...

javascriptcssreactjsstyles

Table lines that are indented

I am currently in the process of transforming a standard HTML table into an indented version like this: Is there a way to hide the initial part of the border so that it aligns with the start of the text, even if I can't do it directly in HTML? ...

htmlcss

Determining the pageY value of a div element with overflow-y styling

Currently, I have implemented a script that tracks the mouse's position upon hover. My goal is to integrate this script within a div that has overflow-y: scroll The script currently utilizes pageY which identifies the position relative to the windo ...

javascriptjquerycss

Different methods for importing a JSON file within the public directory using Vue-CLI

Is it possible to import a JSON file for future modification by placing it in the public folder instead of the assets folder? Initially, I referred to the file using import JSON from ../../public/Data.json, which worked. However, I realized that after buil ...

vue.jsvuejs2vue-clivue-cli-3

"Implement a function to append a new item to all JSON objects in an array if they share a common value with a different JSON object in the array using

Hi there, I'm new to Vue Js and I'm currently working on adding or merging new items in all JSON objects within an array that share the same value with another JSON object. I know how to push a new JSON object into an existing one, but I would re ...

javascriptarraysjsonvue.js

Arranging items in a flex container

My goal is to achieve the following layout with flexbox: #box { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: center; justify-items: center; align-items: center; } #spotLight img { width: 15%; height: 15%; } # ...

htmlcss

Creating a custom directory structure for specific types of files in Vue Cli 3 build

Recently, I started using Vue to create web applications. When I use npm run build, it generates the following structure: https://i.stack.imgur.com/RWp4H.png However, I have a specific layout in mind that I want to achieve: https://i.stack.imgur.com/79S ...

vue.jsnpmwebpackvue-cli-3

How do I implement a filtering system in Vue.js for products based on size, color, and category? Is it possible to create a step-by-step slider for selecting each

How can I use vue.js to implement a filtering system for products based on size, color, and category? I want users to be able to select each filter one by one in a step-wise slider interface. Once all filters are chosen, the products that meet the criter ...

vue.jsvuejs2vue-component