I would like to center the v-switch element inside a v-flex horizontally and I already tried this here: vuetify center items into v-flex, but it seems not to work for the v-switch element.
Whether I wrap it inside a div class like this:
<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 I use the class directly inside the v-flex:
<v-flex xs12 md2 text-xs-center>
It doesn't work. Also using other classes like class="justify-center" doesn't work.
Here is a codepen, so you can see the problem
What is the right way to do it?
Add class="switch-center" in v-switch tag and write below CSS will resolve your issue. Thanks
.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>
Vuetify version 1.5:
You can do that using the <v-layout row wrap justify-center> instead of <v-layout column>. you also need to change md10 to md12 so the v-switch appears in the center:
<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>
Here is a Codepen.
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>
Apply "justify-center" to the "v-layout" tag, which should be found prior to the "v-flex" tag.
<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>
EDIT: just saw your codepen in the comments. Assuming you're trying to keep the text aligned to the left while moving the v-switch to the center, try using two different v-layout tags for each v-flex tag.
<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>
Related
When wrapping some components inside a badge they loose their original width
<v-badge color="warning" icon="mdi-lock">
<v-text-field label="lost width due to badge" />
</v-badge>
which results into this ( reproduction link )
I know that the textfield component provides an append slot
<v-text-field label="field goes here">
<template v-slot:append>
<v-avatar color="warning" size="small">
<v-icon icon="mdi-lock" />
</v-avatar>
</template>
</v-text-field>
but this is not the same ( reproduction link )
Is there a way to use the badge but don't affect actual widths?
Add a width: 100% to the badge tag like below:
<template>
<v-app>
<v-main>
<v-container>
<v-text-field label="width is fine" />
<v-badge style="width: 100%" color="warning" icon="mdi-lock">
<v-text-field label="lost width due to badge" />
</v-badge>
</v-container>
</v-main>
</v-app>
</template>
result:
I've been struggling with an issue for a while now and I was hoping that a fix would be released and the issue would resolve itself. It did not unfortunately. I have this basic code in my App.vue that is using vuetify elements:
<template>
<v-app class="app" id="inspire">
<v-content>
<v-container class="fill-height" fluid>
<v-row align="center" justify="center">
<v-col class="text-center">
<v-card outlined>
<span>Source</span>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
This looks fine. However, when I scale down to a mobile device, the v-card is not centered, but pushed to the left. See image below. When I remove the fill-height property on the container, everything looks correctly, but I would like to center the v-card vertically on my page. Is this a Vuetify issue? I could not find this exact issue described anywhere else. Is there maybe something wrong in my setup?
Thanks in advance!
Jeroen
The margin-right: -12px and margin-left: -12px that come from the .container.fill-height > .row element are causing the issue. Doesn't seem that they are aware otherwise they would add margin: auto of some kind to resolve it. Hope that helps.
Is there any way that i can map my v-img to a normal html map?
This is my code.
<template>
<v-container>
<v-row class="mx-1">
<v-col cols="12">
<v-row justify="center">
<v-img contain src="/img/home-page.jpg" :aspect-ratio="1/2.25" max-width="400px" max-height="100%"></v-img>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
There is nothing in the Vuetify docs. So maybe there is a custom way to perform this?
I could not find a way to make use of the map html tag because <v-img> is a div under the hood.
I found this work around using anchors (in the example is black to make it visible).
https://jsfiddle.net/ndja5Lsc/26/
So I figured out the answer thanks to the response here.
<template>
<v-container>
<v-row class="mx-1">
<v-col cols="12">
<v-row justify="center">
<v-img usemap="" class="image" contain src="/img/home-page.jpg" :aspect-ratio="1/2" max-width="400px" max-height="100%">
<router-link tag="a" to="/first">
<a style="position:absolute; top: 35%; right: 18%; height:10%; width: 10%;"></a>
</router-link>
</v-img>
</v-row>
</v-col>
</v-row>
</v-container>
</template>
I put a router-link inside my v-img and an a tag inside that.
I am trying to insert footer to the Vuetify's list or menu or combobox. They all are pretty same. I tried every possibe css solution I could without solution.
This is what I want but I want the bottom button to be statically visible at the bottom even if scrolling:
Regular fixed css solution do not work no matter on what element I do apply styles.
This is the combobox I am trying to implement it to:
<v-combobox
style="min-width: 260px;"
dense
:value="item.description"
:items="products"
item-text="name"
item-value="id"
:error-messages="item.description_error"
:filter="filter_products"
#input="product_selected"
ref="description">
<template
slot="item"
slot-scope="{ index, item, parent }">
<v-list-tile-content v-if="!item.footer">{{ item.name }}</v-list-tile-content>
<v-btn v-else flat dark small style="padding-left:0!important;margin-left:0!important;display:table-row;width:100%"
color="primary"
depressed
:ripple="false"
#click.stop="add_new_product"><v-icon left>add_box</v-icon>{{ item.footer }}</v-btn>
</template>
</v-combobox>
Also tried using v-menu and v-list
<v-menu max-height="250px">
<v-text-field label="Hello" slot="activator"></v-text-field>
<v-list>
<v-list-tile v-for="item in 10">hello</v-list-tile>
</v-list>
<p style="position: fixed; bottom: 0;">IUWHEGIuiHWEGIUHGIWUEHGIUWHEGIUHWEIUG</p>
</v-menu>
Codepen
We need to add max-height and overflow: auto to the v-list element so that we can scroll the list, and not the whole menu.
Add "footer" to the bottom of the v-menu and it should work as expected.
And just wrap it inside the v-card for example so that menu is not transparent.
<v-menu v-model="menu" offset-y>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-list class="custom-list">
<v-list-tile v-for="item in items"></v-list-tile>
</v-list>
<v-divider></v-divider>
<div class="pa-1" #click.stop="">
<v-btn flat dark small color="primary" depressed :ripple="false">
<v-icon left>add_box</v-icon>
footer button
</v-btn>
</div>
</v-card>
</v-menu>
css
.custom-list {
max-height:200px;
overflow: auto;
}
We can use #click.stop="" to prevent it from closing the menu.
I'm using angular material for designing my project. Now I want an input for searching in my toolbar, just like youtube.
My code:
<md-list flex-offset="10">
<md-list-item layout-align="start center">
<md-input-container md-no-float flex>
<input type="text" placeholder="Search" flex>
</md-input-container>
<md-button> test </md-button>
</md-list-item>
</md-list>
The toolbar tags before my md-list looks like this:
<md-toolbar layout="row" flex style="max-height: 60px;">
<div class="md-toolbar-tools">
What I've tried:
Wrapping it inside a normal div and setting layout-align to start, center.
Using a form tag to wrap the input container.
Problem:
The input group won't center vertically, and this is what I'm after. Every other directive I've tried centers perfectly like the md-button.
Is this a bug or am I doing something wrong?
Edit (Added picture comparing, md-input-container, input, md-button):
Did You try
md-input-container .md-errors-spacer{
min-height: 0px !important;
}
md-input-container has this rule from the specs {margin: 18px 0;} to account for validations, you can override it by making a custom clear-margin class {margin: 0 !important}.