Consolidate radio group in Vuetify platform

I'm having trouble centering the v-radio-group. Here's my current setup:

<v-container grid-list-md text-xs-center>
  <v-form ref="form">

    <div v-if="question.question_type == 'YESNO' ">
          <v-radio-group v-model="answer">
            <v-layout>

              <v-flex>
                <v-radio
                value="Yes"
                label="Yes"
                ></v-radio>
              </v-flex>

              <v-flex>
                <v-radio
                value="No"
                label="No"
                ></v-radio>
              </v-flex>

            </v-layout>
          </v-radio-group>
        </div>   

  </v-form>
</v-container>

I have attempted to apply the classes 'text-xs-center' and 'justify-center' to form and div tags but it has not resolved the issue. I am striving to align this layout (radio buttons) in the middle of my form.

javascriptcssvue.jsvuejs2vuetify.js

Answer №1

To apply the flex-center class to your div element wrapping a group of radio buttons, add the following CSS rule:

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Here is a complete example:

new Vue({
  el: '#app',
  data() {
    return {
      question: {
        question_type: 'YESNO'
      },
      answer: ''
    }
  }

})

.flex-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d6b687869747b645d2c3329332d">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24525141504d425d64150a100a14">[email protected]</a>/dist/vuetify.min.css">
<div id="app" data-app>
  <v-container grid-list-md text-xs-center>
    <v-form ref="form">

      <div v-if="question.question_type == 'YESNO'" class="flex-center">
        <v-radio-group v-model="answer">
          <v-layout>

            <v-flex>
              <v-radio value="Yes" label="Yes"></v-radio>
            </v-flex>

            <v-flex>
              <v-radio value="No" label="No"></v-radio>
            </v-flex>

          </v-layout>
        </v-radio-group>
      </div>

    </v-form>
  </v-container>

</div>

Answer №2

To achieve this in the Vuetify framework, follow this approach:

<v-form>
  <v-radio-group row v-model="answer" class="justify-center">
    <v-radio value="Yes" label="Yes"></v-radio>
    <v-radio value="No" label="No"></v-radio>
  </v-radio-group>
</v-form>

Make sure to include the row prop on the v-radio-group and use justify-center to align the buttons.

new Vue({
  el: '#app',
  data: () => ({
    answer: null
  })
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285e5d4d5c414e516819061c0618">[email protected]</a>/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02747767766b647b42332c362c32">[email protected]</a>/dist/vuetify.min.css">
<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-xl>
        <v-container grid-list-md text-xs-center>
          <v-form>
            <v-radio-group row v-model="answer" class="justify-center">
              <v-radio value="Yes" label="Yes"></v-radio>
              <v-radio value="No" label="No"></v-radio>
            </v-radio-group>
          </v-form>
        </v-container>
      </v-container>
    </v-content>
  </v-app>
</div>

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

Transmitting multiple file attachments to a PHP file through AJAX

In my form, I have the following HTML code: <input type="file" id="attachments" name="attachments" multiple> I've already implemented a JavaScript function that handles form submission using AJAX, but it doesn't handle uploaded files. Wi ...

javascriptphpjqueryajaxforms

Having difficulty generating a Meteor.js helper using a parse.com query

Utilizing my meteor application, I fetch and display data from Parse.com. Initially, I integrated the parse.com javascript query directly into the template's rendered function, which was successful. Now, I aim to utilize the Parse.com query in a help ...

javascriptmeteorparse-platformmeteor-blazemeteor-helper

Uncertainty surrounding the application of class selector within CSS

Currently, I'm deep into my CSS learning journey on Progate.com. I've been cruising through the exercises, but I hit a roadblock when it comes to a specific class selector in the CSS code. The task at hand is simple: I need to tweak the CSS so th ...

htmlcss

Adjust the font size based on the dimensions of the container

I'm currently working on a script that dynamically sets the font-size based on the container's dimensions and the length of the text. This is what I have implemented so far. window.onload = function () { var defaultDimensions = 300; ...

javascripthtmlcss

Encountering an issue with the message "SyntaxError: Unexpected token < in django-jquery-file

I am currently working on implementing django-jquery-fileupload into my project. https://github.com/sigurdga/django-jquery-file-upload However, I encounter an "Error SyntaxError: Unexpected token < " when attempting to click the "start" upload button. ...

javascriptjquerypythondjangofile-upload

Apply a dynamic function to assign a background color to a specific class

Currently, I have a function called getBackground(items) that returns a background color from a JSON file list. Within my application, there is a component that automatically adds a class name (.item-radio-checked) when a user clicks on an item in the list ...

javascriptangulartypescriptionic2

Using Vanilla JavaScript and VueJS to smoothly scroll back to the top of a div when a button is clicked

I have a VueJS-based app that features a multistep form with a next button. You can check out the functioning of the app here: My current challenge is ensuring that once the user clicks the next button, the top of the following question becomes visible. I ...

javascriptvue.js

Tips for developing a directive that supplies values for ng-options

I have select elements with the same options throughout the entire app, but they may vary in appearance. For example, selects for a user's birthday (day, month, year). Is it possible to create a directive that can provide values or expressions for ng ...

javascriptangularjsangularjs-directiveng-options

How can I adjust the flex spacing based on the width of the window?

My figures are evenly spaced using flex spacing, but when I resize the window, they extend beyond the parent section. Here is the HTML code snippet: <section class="features"> <figure> <img src="Images/Vanilla-Cup ...

htmlcssflexbox

Displaying the preselected option in a Select dropdown menu using Angular

Here is the code snippet I have: <select label="people" id="ppl" [(ngModel)]="Selectedppl" (ngModelChange)="onPplSelection($event.target.value)"> <option>select people</option> <option *ngFor="let x of peopleList" [ngValue]="x"> ...

javascriptangulartypescript

How to create vertical spacing between <a> elements within the same div using HTML and CSS

Currently, the layout in picture 1 shows how my content is displayed. I am looking to create spacing (bottom margin?) between the images like the example in picture 2. The two side-by-side blocks are separate DIVs, and the images within each line belong to ...

htmlcssimagemargin

Is it possible to define the sequence of wrapped items in CSS flexbox?

I am using a <div> with CSS flex to maintain responsiveness. I want to control the order in which elements are wrapped. For instance, I need 1 - 2 - 3 To be rearranged as 1 3 2 Once fully wrapped. Here is my current code: https://jsfiddle.net/ ...

htmlcssresponsive-designflexbox

Add a variable from a callback function in AJAX's success response

Is there a way to effectively utilize the variable in the appended message of the AJAX success call? http://codepen.io/anon/pen/fdBvn data['name'] = $('#goofy').val(); $.ajax({ url: '/api/1/email/test/', data: data, type ...

javascriptjqueryajax

The characteristics that define an object as a writable stream in nodejs

Lately, I've been delving into the world of express and mongoose with nodejs. Interestingly, I have stumbled upon some functionality that seems to work in unexpected ways. In my exploration, I noticed that when I create an aggregation query in mongoos ...

javascriptnode.jsexpressmongoose

Alert: '[Vue warning]: Directive "in testing" could not be resolved.'

Currently, I am running unit tests within a Vue 2.0 application using PhantomJS, Karma, Mocha and Chai. Although the tests are passing successfully, I am encountering a warning message with each test indicating an issue like this: ERROR: '[Vue warn ...

javascriptphantomjsvue.jskarma-mochamocha-phantomjs

Tips for streamlining the JSON parse object prototype in JavaScript

I recently had a JavaScript object that was created without a prototype. let bar = Object.create(null); After reading and parsing a JSON file in Node.js, I reassigned the parsed data to bar. Here's how: fs.readFile('data.json', 'utf8 ...

javascriptjsonnode.js

Is it possible to deactivate a button using jQuery without changing its visibility to transparent?

In my current project, I am utilizing jQuery and exploring its unique methods. I have a scenario where I need to disable two buttons based on a specific condition: if (...condition...) { $('button#submit, #hint').prop("disabled", true); } Ho ...

javascriptjquery

What could be causing the net::ERR_CONNECTION_CLOSED error to occur following an ajax request?

I'm facing an issue where my code works perfectly fine on localhost, but I encounter the following error when trying to run it on a hosting platform: (failed) net::ERR_CONNECTION_CLOSED. Could someone please explain what this error signifies and p ...

ajaxlaravelvue.jsaxios

CSS3 animation for rotating elements

If I have this box in CSS3 (also if, for what I understand, this is not CSS3, just browsers specific) : HTML <div id="container"> <div id="box">&nbsp;</div> </div> ​ CSS Code #container { paddin ...

jqueryhtmlcss

How to create an array of objects using an object

I have a specific object structure: { name: 'ABC', age: 12, timing: '2021-12-30T11:12:34.033Z' } My goal is to create an array of objects for each key in the above object, formatted like this: [ { fieldName: 'nam ...

javascriptreactjsangulartypescript