I am using Vuetify's tooltip component but it doesn't work on mobile devices but works on the laptop. How can I make it work on mobile/iPad devices?
<v-text-field required
label='Information'
v-model='dummy.name'
:rules='nameRule'>
</v-text-field>
<v-tooltip left>
<v-icon class="icon-align" small slot="activator" dark color="primary">info</v-icon>
<span>Please enter information.</span>
</v-tooltip>
For me, with vuetify version 2.3.4 the tooltip is activated on touch in tablet and mobile devices. In some cases, it was not usable and I had to control it by disabling property checking the breakpoint. You can try to define a custom activator. Here an example
Related
I have vuetify v-textarea in my page and problem with maxlength in it. In web all is good, but on devices when I paste text inside textarea and then typing I pass over maxlength.
<v-textarea
id="typo-error-message"
v-model.trim="$v.message.$model"
:maxlength="1000"
:counter="1000"
:error-messages="$v.message.$error ? desriptionValidationErrorMsg : ''"
rows="1"
auto-grow
outlined
single-line
/>
I was trying to find something on the Internet and came across this codepen. However, it also does not work on devices and exceeds the maxlength.
https://codepen.io/katerlouis/pen/YzPNYoW
I'm really lost on this one. This is my code:
<template>
<v-container>
<v-row>
<v-col cols='12'>
<v-text-field
label="This is a label"
single-line
solo
></v-text-field>
</v-col>
</v-row>
</v-container>
</template>
If I enter text into the field on desktop it's fine. Even viewing the browser through Chrome DevTools and using the PC keyboard works. But direct entry using the phone's keyboard does not. The text just gets overlayed on the label.
What's more interesting is that it focuses properly if you type a space or punctuation and then the letters.
And yes, that's all the code I have in the file haven't even added in export defaults yet
Using nuxt v2.12.2 and #nuxtjs/vuetify v1.11.2
EDIT: I've opened a GitHub issue here. If it doesn't get answered here you can always check the issue.
In my case the problem is due to vuetify version - v2.2.22 is the last one that is working properly. For now try downgrading your packages as per instructions in here (try experimenting with different package versions): https://forum.vuejs.org/t/how-to-update-vuetify-to-latest-version-in-nuxt-js/66326
under nuxt.js i'm using vuetify. v-img works, but as i try to use the 'placeholder' feature, as described in the docs, it does not work. for the example i copy exactly the example that works in the docs.
we suppose to see a circle loader while we wait for the image.
for testing, i'm using chrome to slow down the connection.
this doesn't work. there is a blank for a few seconds, then the image appears.
here is the code. any idea?
<v-col cols="4">
<v-img :src="selectedItem.picture">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="blue"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
note: i'm not using vuetify-loader. could this be the issue?
Better use 'default' slot and show it while checking #error="imgLoadStatus='error'" of image.
For me, sometimes in runtime while dynamically loading and changing image, placeholder was not showing up at all.
So I tried to implement this example for a v-badge from vuetify and it is simply not showing in the DOM:
<v-badge bordered color="error" icon="mdi-lock" overlap>
<v-btn class="white--text" color="error" depressed>
Lock Account
</v-btn>
</v-badge>
Then I compared the source code of the working example on the vuetify website with the compiled source code of my example:
Working example on vuetify website:
Not working example in my vue instance:
Notice the absence of the v-badge__wrapper span. Instead of that there is only an empty comment: <!---->
Any idea why? And how to fix this?
Might be vuetify version issue, please upgrade your vuetify version. I solved it also by just upgrading it.
I am trying to programmatically change the color of chips inside of a v-combobox if there is an error for that element.
I was just using v-combobox with chips before. This allowed editing of the chips by double clicking. Here's a codepen that allows editing similar to what I was using that allows editing.
https://codepen.io/hassaan97/pen/ZEYWveE
Since I wanted to change the color of individual chips I am using v-slot with v-chip components. Once I do this however I can no longer edit the items when I click on them. Here's a similar example with the same problem. https://codepen.io/hassaan97/pen/KKwzZNY
Here's my code-
<v-combobox
v-model="emails"
multiple
:search-input.sync="syncEmail"
:chips="true"
:deletable-chips="true"
:clearable="true"
:error-messages="errorMessage"
#click:close="remove(data.item)"
:background-color="white"
>
<template v-slot:selection="data">
<v-chip close :color="getColor(data.item)" #click:close="remove(data.item)">
<strong>{{ data.item }}</strong>
</v-chip>
</template>
The selection slot exposes a select function:
<template v-slot:selection="data">
<v-chip #click="data.select">
https://codepen.io/kaelwd/pen/ZEYWvMQ
Here's what the default chip does
And everything available in the slot