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:
Related
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.
I have the follow Td tag:
<td>
<span>
{{ device.id }}<CopyComponent
:copy-content="device.id"
color="white"
/>
</span>
</td>
and this is the contents of the component:
<template>
<div v-if="copyContent!==undefined">
<button
:id="copyContent"
#click="doCopy"
>
<font-awesome-icon
:icon="myIcon"
style="color:white;"
/>
</button>
<b-tooltip
ref="idToolTip"
:show.sync="show"
:target="copyContentString"
title="Click to copy"
/>
</div>
</template>
Just a button really, however for some reason when the table is being displayed the button appears under the id instead of the the right of it. I've done the hacky approach of placing style="display: inline;" in almost everywhere but it still displays underneath :( what am i missing from styling or alignment to fix this?
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 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>
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.