The v-btn (vuetify) component is displayed differently if it has the "nuxt" attribute (to be used as a in the nuxt.js framework).
How to fix it?
The first image is the v-btn component without the "nuxt" (as it should display normally) and the second has the attribute.
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
>
Accept and Enter
</v-btn>
<v-btn
class="enter-btn"
large
color="error"
:disabled="!agreed"
nuxt
to="/to/url"
>
Accept and Enter
</v-btn>
When the nuxt and to attributes are added, the element changes from <button ...> to <a href="/to/url" ... >.
Unfortunately adding the two code samples to a fresh project does not show the visual difference you have.
The <a> has an additional class v-btn--router, but it doesn't cause the width difference or text alignment issues.
You can debug a little by inspecting each element in the console, looking at the Styles pane and checking for any sources of style (on the RHS) other than Vuetify ones, which are VBtn.sass & VApp.sass.
Since width is one of the problem attributes, it is also worth while checking the width value in the Computed tab.
If it is being set directly by something, you can click it open to see the source of it's value (for example, height is set to 44px by classes .v-btn:not(.v-btn--round).v-size--large in the file VBtn.sass).
Related
I've been looking for a way to prevent v-navigation-drawer from shortening texts by itself on Vuetify. When I fill some spaces with text in the v-navigation-drawer, the text goes like "gobbled...". I mean, I want the tags inside to smoothly text such as "gobbledygook". How can I achieve this? I hope the image below helps you what's the problem exactly is.
Problem: I don't want v-navigation-drawer to shorten the texts inside of itself.
Edit: The code goes like:
<v-navigation-drawer
dark
color="#fff"
width="160"
v-model="is_drawer"
v-if="$vuetify.breakpoint.smAndDown">
// many <v-list-item> and <v-list-group> inside here
// and shrinking-text problem occurs on v-list-item-title
</v-navigation-drawer>
The issue is in the list title item title, to fix this add the following CSS rules :
.v-list-item__subtitle, .v-list-item__title{
text-overflow: initial!important;
white-space: initial!important;
}
The list item text is automatically truncated when the length of text is too long. Although there is no built-in method to disable text truncation, it can be disabled by using the class d-flex on v-list-item-title, since text truncation requires display block.
To allow long text to wrap, there is another helper class text-wrap.
See this codesandbox with all options in action: https://codesandbox.io/s/hungry-voice-bbxtg?file=/src/components/HelloWorld.vue
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'm trying to make a toolbar using Vuetify for this text editor:
https://github.com/scrumpy/tiptap
My issue here is that TipTap has methods to check for editor status.
e.g. isActive.bold()
TipTap also uses commands to toggle status of formats commands.italic
While the button groups in Vuetify wants to have an array of values.
<v-btn-toggle multiple v-model="format">
<v-btn :value="1" #click="commands.bold">
<v-icon>mdi-format-bold</v-icon>
</v-btn>
<v-btn :value="2" #click="commands.italic">
<v-icon>mdi-format-italic</v-icon>
</v-btn>
<v-btn :value="3" #click="commands.strike">
<v-icon>mdi-format-strikethrough</v-icon>
</v-btn>
I'm coming up short on how to combine these two approaches.
I've tried to create a computed v-model field to bind the button group to and somehow compute the array to bind using the status methods.
The Vuetify button groups seems overly complicated to work with.
Just having a isPressed/Toggled/Checked prop on the button would have solved this a lot easier.
Thoughts here?
I have a prismic group (link_sections) containing a bunch of fields. One of the fields is a link, because the markup I am creating with these groups is supposed to contain a button that links elsewhere on the site. The problem is that I don't know how to use prismic links properly in this context because as far as I can tell it is not possible to bind the link data inside of a v-btn like so...
<v-layout v-for="(section, index) in fields.link_sections" :key="index">
<h2>{{section.header}}</h2>
<v-btn router-link :to="{{section.link}}"></v-btn>
</v-layout>
If I just render out {{section.link}} outside of the v-btn element I can render out the text value of the link successfully, but that's about as much as I can do and obviously I want to use the text as an actual link. Anyone know how I can make a link field from a prismic group work with a v-btn element?
Your syntax is wrong, try this snippet:
<v-btn :to="section.link">Link</v-btn>. Also <b-btn></v-btn> has not router-link prop. Just pass prop to. If you pass to prop, it implies that you want that button to be a <router-link>
Denotes the target route of the link.
With both v-select multiple and combobox, my chexboxes are showing up as huge but are otherwise functioning... how can I fix this? I'm running vuetify#1.5.18, vue-cli 3.4.1 , and vue 2.5.16
I have tried moving the v-select multiple and combobox outside of all my own classes to confirm that it's not the fault of my own formatting, I've also applied and the link with no effect
Inspection of checkbox element shows font-size:24px has been overriden, I need to reverse that override somehow.
I inspected the checkbox element in my program vs. the Vuetify documentation element, and here is the discrepancy:
In the above picture from Vuetify documentation, the .v-list-item_action min-width is 24px, but in my program the min-width is 56px:
How can I adjust the min-width manually?
<v-select
v-model="metadata[index].savedValue"
:items="metadata[index].options"
color="orange"
multiple
outline
></v-select>