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

retrieve object from s3 using angular and open it as a pdf

I'm attempting to access a file from an s3 bucket using Angular and display it as a PDF. I have a node service set up to retrieve the object, which I then call from Angular. However, when I try to open the PDF in Angular, it appears as a blank (white) ...

javascriptnode.jsangularaws-sdk-nodejsaws-s3-client

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

javascriptangularpowershellangular-cli

PostMan gives me an error when I attempt to send an image file to NodeJS using multer (req.file is undefined)

After encountering issues with saving image files to the server using multer-s3, I attempted to use multer and s3Client instead. Unfortunately, I faced similar challenges as req.file or req.files from the multer-s3 middleware continued to return undefined. ...

javascriptnode.jsexpressmulter-s3

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

Delete the designated column from the table

I am having difficulty with hiding and showing table columns using checkboxes. I need to eliminate the Mars column (in bold) along with its corresponding data (also in bold). Once the Mars column is removed, I want the Venus column and its data values to ...

javascriptcss

Using a variable to contain a loop in Jquery

Seeking assistance with a jQuery function that retrieves values from a PHP form to create a variable for an ajax call. Is it possible to include a loop within a variable? Below is a snippet of my code to provide better context: ... var teacher_ids = $( & ...

javascriptphpjqueryajax

Step-by-step guide for building and populating a JavaScript Dictionary

Does anyone know how to create a Dictionary with a key and a list of values pair in Python? I have been able to create dictionaries with a single value for each key, but now I need to store multiple items as values for each key. Here is what I have tried: ...

javascriptjquerydictionary

Float and tap

Can someone assist me with my code? I have 4 identical divs like this one, and when I hover over a link, all the elements receive the same code. <div class="Person-team"> <div class="profile-pic-d"> <a cl ...

javascriptjqueryhtmlcss

deployJava.js injects a new <embed> element into the header section of the webpage

I've ran into an issue with the Java applets on my website. I included the deployJava.js load tag in the head section of the page, but when I look at the resulting HTML in Chrome debugger, this script seems to be breaking my head content and starting ...

javajavascripthtmlcssdeployjava

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

phphtmlcsswordpress

Circular center button in the footer UI

Struggling with aligning a button in the footer perfectly? I have two icons on each side and while the UI is almost there, something seems off with the center icon's padding and shadow. I'm currently working with material-ui. Take a look at the i ...

htmlcssreactjsangularjsmaterial-ui

The component 'AddPlaceModal' could not be located in the path '~/components/AddPlaceModal.vue'

Recently, I started incorporating Nuxt for Vue into my projects. In an attempt to enhance my page, I added a new component within the /components folder. However, I encountered a warning during compilation: "export 'AddPlaceModal' was not found ...

javascriptvue.jsnuxt.js

Using Symfony2 Knp-snappy library for PDF generation, the CSS styling is not being properly imported

Attempting to create a PDF from an html.twig template, but facing some issues... Although the content is correct in the PDF, the layout is missing. It appears that the CSS files are not being imported... Bootstrap from Twitter is being used to handle the ...

phpcsstwitter-bootstrapsymfonypdf

Would this be considered a practical method for showcasing an image with jQuery?

Is there a more efficient way to display an image once it has been loaded using this code? LightBoxNamespace.SetupLightBox = function(path, lightBox) { // Create a new image. var image = new Image(); // The onload function must come before ...

javascriptjquery

Understanding the syntax for matching files and paths in Node/JavaScript using glob, including the use of wild

I stumbled upon http://gruntjs.com/configuring-tasks#globbing-patterns and found it to be the most useful reference so far. I have come across the following statement multiple times: For more on glob pattern syntax, see the node-glob and minimatch docu ...

javascriptnode.jsglob

Are there any lodash functions available for removing an array that matches another array from the main array?

I currently have two arrays named available and selected, each containing certain values. I also have another array called finalAvailable where I want to include all items from the available array except those that are already present in the selected array ...

javascriptarraysjsonlodash

What is the best way to establish a two-way connection between two arrays?

Within my application, there is an ItemsService responsible for fetching Items from the server and storing them as JSON objects in its cache. These Items may be displayed in various formats such as tables, graphs, or charts. For instance, when setting up ...

javascriptangularjsjquery-ui-sortableangular-ui-sortable

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

javascripthtml

Using the KnockOut js script tag does not result in proper application of data binding

Being new to knockout js, I found that the official documentation lacked a complete html file example. This led me to write my own script tags, which initially resulted in unexpected behavior of my html markups. Strangely enough, simply rearranging the pos ...

javascripthtmlknockout.js

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

htmlcsswordpresstemplates