I use Vuetify and have a question about access to styles of v-select input.
Actual result:
The desired result is to get rid of space between dots and arrow.
I went through the official docs, but it didn't help.
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row align="center">
<v-col cols="1">
<v-select
v-model="select"
:items="items"
item-text="state"
return-object
single-line
></v-select>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
The full code example
You need to override the existing style of one of the nested elements.
Add this to the style (example from your codepen):
.v-select__selection.v-select__selection--comma {
max-width: 100% !important;
margin-right: 0 !important;
}
I'd recommend adding a specific class (e.g. wide-text-area or something) to the v-select element and specify it in the CSS so the style doesn't apply to all elements without intention.
Here is the snippet from the template for my view:
<v-card>
<v-card-text>
<v-treeview selectable hoverable :items="items" :open.sync="open">
<template v-slot:prepend="{ item }">
<v-icon>{{item.icon}}</v-icon>
</template>
<template v-slot:label="{ item }">
<v-badge :content="item.count">{{item.name}}</v-badge>
</template>
</v-treeview>
</v-card-text>
</v-card>
The badge is clipped vertically.
Is there a way to prevent clipping?
Found an easy solution. Add the following to the vue file.
<style lang="scss">
.v-treeview-node__content {
line-height: 4;
}
</style>
<v-badge :content="item.count" inline>{{item.name}}</v-badge>
Adding inline prop to v-badge solves the problem. Please have a look here.
Good day. I am working with vuetify, using the following v-dialog in a component:
<template>
<div>
<!--Indicador-->
<v-dialog class="vdialognew" v-model="mostrarIndicator" persistent>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<cube-shadow class="spinnerRotate"></cube-shadow>
</v-layout>
</v-container>
</v-content>
</v-dialog>
<!-------------->
</div>
</template>
<style scoped>
.vdialognew {
box-shadow: none !important;
max-width: 610px !important;
}
</style>
As you will see in v-dialog I have added the vdialognew class, to apply those new styles, but when loading the content by checking in the browser console, I see that the vdialognew class does not apply to it, only. Similarly, if I use the style property inside the v-dialog tag, it does not work for me. How can I make such a change?
I am doing this modification to eliminate the box that is seen behind the green square:
Thank you very much in advance. Blessings
Passing "class" to the v-dialog won't work.
Use "content-class" instead. In your case
<v-dialog content-class="vdialognew" v-model="mostrarIndicator" persistent>
should work.
Have a look at the v-dialog docs
Use "content-class" is the correct answer as mentioned by #mxmass, but if you're trying to add the class in scoped level, it won't work.
Add the style in the beginning, so let's say if you're using nuxt, create a main styling file such as main.scss, then in nuxt.config.js, add that file in css section. That way, your styling class is available when you're using "content-class". Hope this helps.
you can add multiple names to class
<v-dialog class="vdialognew dialogCss"></v-dialog>
<style>
.dialogCss {
background: #8e5ba6;
}
</style>
How can I add md-icon elements next to inputs like in angular material 1 and this screenshot from google contacts:
Google contacts edit form
I know I can use mdPrefix but I like this style better.
Code example:
<md-input-container>
<md-icon mdPrefix>star</md-icon>
<input placeholder="Test" mdInput />
</md-input-container>
The icon inside the input field and I'd like it to be next to it:
Using some css tricks, I was able make something close to the the provided screenshot.
css to position icons:
/deep/ .mat-icon {
color: grey;
width: 24px;
margin: 20px 40px 0 0;
}
html:
<div style="display: flex">
<md-icon >email</md-icon>
<md-input-container >
<input mdInput placeholder="Email">
</md-input-container>
</div>
Code example
at first I'm css beginner
I was trying to make vue.js animation for some items and it worked well but I got wrong animation
-We have button to add element to the array randomly
-We can click at element to remove it
problem:
-The animation always run on the last item
I expected that vue js should apply animation on the item which added or removed
What is the wrong in code that make the animation go wrong ??
What should i change or add to make the animation work correctly ??
new Vue({
el: "#app",
data: {
myNumbers: [1, 2, 3, 4],
highestNumberInMyNumbers: 4
},
methods: {
addNumber() {
this.highestNumberInMyNumbers++;
this.myNumbers.splice(Math.floor(Math.random() * this.myNumbers.length), 0, this.highestNumberInMyNumbers);
},
removeNumber(element) {
this.myNumbers.splice(element, 1)
}
}
})
.mix-enter {
opacity: 0;
}
.mix-enter-active {
transition: opacity 500ms;
animation: mixing-in 600ms ease-in forwards;
}
.mix-leave {}
.mix-leave-active {
transition: opacity 1000ms;
animation: mixing-out 0.4s ease-in forwards;
opacity: 0;
}
#keyframes mixing-in {
from {
transform: translateX(-20px) translateY(20px);
}
to {
transform: translateX(0px) translateY(0px);
}
}
#keyframes mixing-out {
from {
transform: translateX(0px) translateY(0px);
}
to {
transform: translateX(-20px) translateY(-20px);
}
}
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="app">
<h2>group transition for directive v-for </h2>
<hr>
<button #click="addNumber">Add number</button>
<br>
<br>
<div class="row">
<ul class="col-xs-4 col-sm-4 col-md-4 col-lg-4 col-xs-offset-4">
<transition-group name="mix" mode="out-in">
<li class="alert alert-success list-unstyled" style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;" v-for="(number,index) in myNumbers" #click="removeNumber(index)" :key="index">{{number}}
</li>
</transition-group>
</ul>
</div>
</div>
There is a bug in transition-group!
When you bind the key of li as the index, every time you remove a li, the animation always happend at the last li element.
So, if you want to use the animation with li , you can bind the key with number in your case.
<transition-group name="mix"
mode="out-in">
<li class="alert alert-success list-unstyled"
style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
v-for="(number,index) in myNumbers"
#click="removeNumber(index)"
:key="index">
{{number}}
</li>
</transition-group>
vs
<transition-group name="mix"
mode="out-in">
<li class="alert alert-success list-unstyled"
style="height: 40px; padding: 10px 15px;margin-bottom: 8px;cursor: pointer;"
v-for="(number,index) in myNumbers"
#click="removeNumber(index)"
:key="number">
{{number}}
</li>
</transition-group>
Finally, if you use animation with transition-group , do not bind the key to index , instead of item or number (in your case).
No matter what , make sure the key has the unique value.
Solution
Don't use index anywhere in the v-bind:key when using transition or transition-group.
Explanation
There is a bug/missing documentation, as well as bad documentation in the cookbook on vuejs.org, but there's a detailed explanation in the comments [1] on how indexes work, but no recognition this is a problem for developers in it's current state.
I have posted a few times to github, but the Vue.js developers there seem dismissive at best and refuse to either document this behavior or recognize this as a problem.
Reproduction of bug/error
There are three examples in the codepen below. The #1 works, the #2 uses :key="index" (your specific error above) and #3 uses :key="item +'_'+ index".
#2 and #3 give the error you are experiencing.
https://codepen.io/megacromulent/pen/wEzWNL
Summary of codepen:
This one works: (using item as :key)
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item">
{{item}}
</li>
</transition-group>
This one fails: (using index as :key)
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="index" >
{{item}}
</li>
</transition-group>
This one fails worse: (concatenating index with string in :key)
<transition-group name="fade" tag="ol">
<li v-for="(item, index) in items"
v-bind:key="item + '_' + index" >
{{item}}
</li>
</transition-group>
Bug report (rejected)
I submitted this bug report to Vue.js devs here:
"Transition-group animates only last element if using index as the key"
https://github.com/vuejs/vue/issues/8718
It got closed instantly, so based on their input (requested I do a PR for comment, but that is not in my wheelhouse) I followed up with this feature request for the dev build to give an error, which would solve the problem at it's root.
Feature request (follow up, also rejected)
"Dev build console error when using index in :key value with v-for and transitions"
https://github.com/vuejs/vue/issues/8730
It seems reasonable to put a dev error on this issue, but the vue.js developers seem to think we should be able to figure this out on our own. I hope they come around and see this as a real issue. It's cost me hours of testing and reporting time to figure out.
I hope this helps other devs wasting time with this issue.
References
[1] https://github.com/vuejs/vue/issues/8718#issuecomment-416909724
My solution for this case:
create a random generated string for your array, then use this randomly generated string as the key.
template
<div v-for="(row, index) in rows" :key="row.randomKey">
...
</div>
script
export default {
data() {
return {
rows: [],
}
},
methods: {
add() {
this.rows.push({
id: null,
name: '',
randomKey: this.generateRandomKey()
})
},
remove(index) {
this.currency_exchange.splice(index, 1)
},
generateRandomKey() {
let length = 10
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
}
}
}
Megacromulent
Good research!
For those who, like me, came here looking for:
It is likely that the animation occurs when the key is changed i.e. When deleting and creating an element, if the key does not change, then there will be no animation.
When the array changes, all the elements are rebuilt, which means the keys are also rewritten, and if they change on the element, this will make the element go away and appear.
Megacromulent let's see:
In the second case, the option with index - we remove the first element of the array, new keys are placed over all the remaining elements in the component - but in the beginning they will be the same 0,1,2 ... i.e. The keys of the first list will not change and therefore the elements will not be destroyed and therefore will not be animated.
In the third version, the key for all elements will change every time, i.e. All elements will be redrawn i.e. Removed and rebuilt, animation will work for all elements
Well, in the first version. If the items are the same, it will be the same as with the index because the key will not change, which means, in the case of all the same, only the last one will be animated, i.e. When adding and removing items to the end of the list.