Position the v-switch in the center of a v-flex container

I need to center the v-switch element inside a v-flex horizontally, but my attempts based on guidance from this post on vuetify center items into v-flex have been unsuccessful for the v-switch element.

Even when I wrap it in a div with a class like below:

<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>

Or when I apply a class directly within the v-flex:

<v-flex xs12 md2 text-xs-center>

No method seems to be working. Even using other classes such as class="justify-center" has not yielded desired results.

For a clearer understanding of the issue, you can refer to this codepen.

Can someone please guide me on the correct approach?

htmlcssvue.jsflexboxvuetify.js

Answer №1

To fix the issue, simply add class="switch-center" within the v-switch tag and use the following CSS code:

.switch-center {
  display: flex;
  justify-content: center;
}


.switch-center {
  display: flex;
  justify-content: center;
}
<v-flex xs12 md2 >
    <div class="text-xs-center">
        <v-switch
            class="switch-center"
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </div>
</v-flex>

Answer №2

Vuetify version 1.5:

To achieve this layout in Vuetify version 1.5, you can utilize the 

<v-layout row wrap justify-center>
instead of <v-layout column>. Additionally, make sure to switch from md10 to md12 for the v-switch to be centered:

<v-layout row wrap justify-center>
        <v-flex class="red" xs12 md12>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
          Text Text Text <br>
        </v-flex>
        <v-flex xs12 md2>
                <v-switch
                    @click="SomeFunction"
                    label="Some Label Name"
                    color="black"
                    value="secondary"
                    hide-details
                ></v-switch>
        </v-flex>
    </v-layout>

For live interactive code examples, visit this Codepen link.

Update: Vuetify version 2.0.0:

<v-row wrap justify="center">
   <v-col cols="12" xs="12" md="12" class="red">
       ...
   </v-col>
   <v-col cols="12" xs="12" md="12">
        ...
   </v-col>
</v-row>

Answer №3

To achieve center justification, add the class "justify-center" to the "v-layout" element which comes before the "v-flex" element.

<v-layout justify-center>
    <v-flex xs12 md2 >
        <v-switch
            @click="someFunction()"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </v-flex>
</v-layout>

UPDATE: After reviewing your codepen feedback, if you aim to maintain left alignment while centering the v-switch, consider using separate v-layout containers for each v-flex element.

<v-layout column>
    <v-flex xs12 md10>
        TEXT
    </v-flex>
</v-layout>
<v-layout column align-center>
    <v-flex xs12 md2 >
        <v-switch
            @click="SomeFunction"
            label="Some Label Name"
            color="black"
            value="secondary"
            hide-details
        ></v-switch>
    </v-flex>
</v-layout>

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

Experiencing trouble with calculating the total value of an array of objects due to NaN errors

I've been working on developing this web application in VUE.js, but I'm facing an issue with a specific function where I am attempting to sum the values of each object within an array. This is resulting in a NaN (Not a Number) error. Let's t ...

javascriptvue.js

Tips for automating file uploads in HTML

I am having trouble filling the <input type="file"> element programmatically when trying to upload a file using a form. Can someone please provide me with guidance on how to accomplish this task? The method does not matter, I just want to achieve m ...

javascriptjqueryhtmlajax

Changing the color of a div through animation

Similar Question: jQuery animate backgroundColor I am looking to make a div shine or switch colors to signal to someone that they have gotten a message. What is the best way to animate the background color of a div for this purpose? ...

javascriptjqueryhtmlcss

The Hover Effect fails to function properly on Internet Explorer 6

I have successfully implemented a CSS hover effect that works perfectly in all browsers except for IE6. The issue arises when I add a link to the page - the hover effect functions as expected. However, if I remove the link, the hover effect stops working. ...

cssinternet-explorer-6

Tips for triggering a method when clicking instead of using v-for in Vue.js

I need help arranging an array of objects based on their ratings. Currently, I am able to display the items from highest to lowest rating using the v-for method. But, I would like to first display the objects in their original order and then have a button ...

javascripthtmlvue.js

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

htmlcsstailwind-css

"An issue with preventing default behavior when clicking on a jQuery element

I need some assistance preventing a JQuery onclick function from scrolling the page to the top. I have tried using preventDefault() without success. You can find the code on this website: Below is the code snippet that I am currently using: $( document ...

javascriptjqueryhtml

Guide on successfully uploading an asp.net application to your server

A few weeks ago, I successfully created an ASP.NET web application using visual studio. If you are interested, find the github repository of my project here. Currently, one of the webpages on my website looks like this. I usually only make changes to ind ...

javascriptc#htmlasp.net

The SendGrid API is organizing these tables as a team

While attempting to send an email using SendGrid, the tables in the content are being grouped together instead of displaying as intended. Despite my efforts to reformat the code, the final email appearance is not what I expected. I have diligently review ...

htmljsonpowershellsendgrid

Adjusting the CSS based on the screen's resolution and size

Currently, I am working with a client who needs interfaces to be adapted for two screens with a resolution of 2560x1600. The challenge is that both screens have the same resolution but different screen diagonals. One has a 27" diagonal and the other... on ...

htmlcss

Issue with displaying text and aligning content to the left or right in tables on mobile devices

Looking to design a table using Bootstrap and include some pull-left and pull-right content in a column? Check out this code snippet: http://jsfiddle.net/Zoker/sgdfgkvL/ <td> <div class="pull-left">Some content</div> <div cla ...

htmlcsstwitter-bootstrap

Database entries displayed using a CSS grid

Struggling to organize elements in a grid layout using CSS from my database. Despite all efforts, the items keep aligning to the left instead of forming a proper grid https://i.sstatic.net/5SfJZ.jpg I've attempted various methods to grid the items, b ...

javascripthtmlcss

Using jQuery for transferring data from one page to another resulted in an undefined index error in PHP MySQL

This is my first project where I implemented Jquery for the first time. The project consists of two pages: 1. listofleaders.php and 2. leadersprofile.php On the first page, listofleaders.php, there is an input text box where users can enter a leader' ...

javascriptphpjqueryhtmlmysql

Failure to load image logo when refreshing the page

There's something peculiar happening in my App.vue. Imagine I have a route link, let's say it's localhost/tools or any similar route. The logo image will display on this route. Take a look at the image here https://i.stack.imgur.com/6HaXI.p ...

javascriptvue.jstemplates

Rooms between the buttons

Welcome to this platform! I recently encountered an issue with aligning buttons properly. Despite using justify-content: space-between, I couldn't achieve the desired spacing between the buttons. The current setup has significant gaps between them. Ho ...

css

Unable to utilize drop-down menu for input in form

I have created this drop-down menu using HTML: <div id="mySelect" class="select btn-group m-b" data-resize="auto"> <button style="font-weight:700;background-color:#fff;border-style:solid; border-width:2px" type="button" id="expiry_month" ...

javascripthtmlselectdrop-down-menu

Arrange the items in AngularJS using ng-repeat from horizontal to vertical orientation

I am currently using ng-repeat on floated left <li> elements, resulting in a horizontal list. Is there a way to repeat the same items vertically as shown below? from: Item1 Item2 Item3 Item4 Item5 Item6 Item7 Item8 Item9 Item10 to: Item1 ...

htmlcssangularjsangularjs-ng-repeat

Generating a hyperlink to a specific user ID within a data table

I'm facing an issue with the formatting of my simple table when trying to navigate to user.id. Is there a better approach to this or should I consider moving LinkToUser? All styling has been removed to avoid any conflicts. import styled from 'st ...

javascripthtmlcssreactjsstyled-components

How can JQuery be used to implement "scrolling" buttons and automatically update the main page with fresh data?

I am attempting to achieve the following: 1 - Use jQuery to update index.html with the content from output.html (only update when there are differences in data, and ideally only update the parts that have changed). 2 - Add two buttons in the header ...

javascriptjqueryhtmlcss

Place HTML elements based on the contents of an array

Lines 12-22 My custom function, openManu(), is currently set to display a block element upon loading the page and iterate through an array using a for loop. The purpose of this function is to create an object variable called obj based on the array values ...

javascripthtmlarraysloopsfor-loop