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
Related
Okay, so I am trying to setup a simple grid layout with three v-cards at equal distances.
<v-main>
<v-container>
<v-row>
<v-col>
<v-card outlined tile>Card 1</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 2</v-card>
</v-col>
<v-col>
<v-card outlined tile>Card 3</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
Now, according to the docs and examples they have this should leave me with 3 cards at equal distances, and it does indeed.
Problem is that moment I hover over any of them, they all darken. Looking through the dev tools reveals following issue:
As you can see, the v-cards are not inside v-cols as they should be. Yet, I can't see any errors in the code. Am I missing some extra rule or something?
I believe the problem with darkening on hover should be elsewhere and is not related to the oddity that you see in the Vue debugger. I don't think there is something wrong with your code (compare it to what I mention in #1 below). I tend to believe that the oddity in the debugger is either its own bug or a bug (or feature?) related to how the debugger reflects the Vuetify internals, which doesn't spoil the real app behavior. Here are my arguments:
Look at Vuetify grid with cards example - it is structured the same way as your example (ignore their 'cols' attribute of v-col tag - they showcase an uneven spread of columns, and if you remove that attribute you get pretty much your own example with 3 cards, each inside of its own v-col). However, if you try to copy-paste this standard Vuetify example into an empty Vue CLI app and look into the debugger you see the same odd hierarchy. Check my screenshot: This, however, doesn't spoil the DOM model, where the v-cards are inside of v-cols as expected: This also doesn't create any problems with the actual app behavior. Changing background color at hover (I added that simple CSS change to Vuetify original example just to try to reproduce your original problem) works like a charm. Note that red background in one card of the screenshot - it spreads to the single hovered card only.
I remember seeing the same Vuetify hierarchy oddity in Vue debugger in the past, though it didn't create any problems and didn't seem to be caused by any bugs in the code. I just ignored it at that time.
I also copied your example into a codepen adding just two basic things: the CSS to test hovering (the same as I added in #1 above) and the basic Vue object creation and mounting (which I'd suppose you should have auto-generated).
The CSS:
.v-card:hover {
background-color: red;
}
The JS:
new Vue({
vuetify: new Vuetify(),
}).$mount('#app')
The hovering also works well in that codepen (if I understand correctly the kind of problem you mentioned). I should mention there is one difference in CSS to what I had to use in #1, though. In #1 a custom CSS class (<v-card class="imgCard">) was used as v-cards are inside of another high-level v-card there, so I couldn't use '.v-card' to highlight just one nested card there - they would all highlight together otherwise. BTW, isn't that the problem you experience by chance?
So overall, I think that either your original code has something else that causes the problem (presuming you might have simplified it when writing the question), or I didn't get what kind of hovering you mean. Anyways, I'm quite certain that the oddity in Vuetify debugger doesn't mean there is something wrong with the code itself.
I dont understand why v-container do not apply fluid option. It always behaves as usual container. Here is code from my App.vue
<template>
<v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
<v-container fluid="true">
</v-container>
</v-app>
</template>
I have tried many ways like :fluid="true, or only fluid but it still acts as usual container. After inspecting page I have noticed that it seems like browser is interpretating container class before container--fluid and overlaying it's max width. as on screenshot below. Is there any way to solve this issue? I'm using firefox for inspecting.
For anyone encountering simmilar issue in future:
For learning project I've installed both boostrap-vue and vuetify. When I removed bootstrap vue dependencies container started to act as expected.
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.
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
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.