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.
Related
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.
I want to have a v-text-field inside of a v-tooltip so when a user is shown a tooltip they can enter information inside of the tooltip, but no clicks or input seem to register for the elements inside of the tooltip
<v-tooltip top :open-on-click="true" :open-on-hover="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-text-field></v-text-field>
</v-tooltip>
Actually tool-tips are used only for show some tips, so the all pointer events will be blocked by css pointer-events: none;, We need to override this style with our CSS.
see my working example here
Template
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on }">
<v-btn icon v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
<v-text-field
label="Regular"
></v-text-field>
</v-tooltip>
CSS
.v-tooltip__content{
pointer-events: all;
}
The v-tooltip shows a disabled item when you hover, and the addition of events to this item will not work. You can achieve a similar effect v-menu.
<v-menu bottom right
:close-on-content-click="false">
<template v-slot:activator="{ on }">
<v-list-item-content v-on="on">
<v-list-item-title>Title</v-list-item-title>
<v-list-item-subtitle>Subtitle</v-list-item-subtitle>
</v-list-item-content>
</template>
<v-card class="pa-3">
<v-text-field hide-details v-model="textVal" #change="update"></v-text-field>
</v-card>
</v-menu>
methods: {
update(){
console.log(this.textVal)
}
}
<style scoped>
.toolb{
position:absolute
top:0px;
}
</style>
<script>
export default {
data () {
return {
sideNav: false
}
}
}
</script>
<template>
<v-app>
<v-navigation-drawer v-model="sideNav">
<v-list>
<v-list-tile>
<v-list-tile-action>
<v-icon>supervisor_account</v-icon>
</v-list-tile-action>
<v-list-tile-content>View Meetups</v-list-tile-content>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar dark class="primary toolb">
<v-toolbar-side-icon
#click.stop="sideNav = !sideNav"
class="hidden-sm-and-up "></v-toolbar-side-icon>
<v-toolbar-title>DevMeetup</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-xs-only">
<v-btn flat>
<v-icon left dark>supervisor_account</v-icon>
View Meetups
</v-btn>
</v-toolbar-items>
</v-toolbar>
<main>
</main>
</v-app>
</template>
to make toolbar on top i have to use css style ' position
:absloute ; top:0px;' that affect my all other components because i have to use again in all components style ' position
:absloute ; top:50px or 40 px;' and those components are not behaving like they should so please tell how can i fix it ? without using css style only vuetify
.where i study vuetify ,my teacher was using as it is code and its working fine without css ??? only using vuetify in this component .
but if i use v-content to parent of my v-container than i am getting another problem that is navigation-drawer is on top after that toolbar is appearing
As the title states, I have a component that opens a dialog. The dialog contains a card with a toolbar at the top and a form within the card. I am trying to make the toolbar fixed such that it does not disappear when scrolling. I have tried to add the "fixed" attribute to my toolbar but doesnt seem to give me the results I expect. Below is my code and thanks in advance...
<template>
<v-dialog :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-toolbar fixed flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text>
<v-form ref="form">
<v-container>
<v-layout row wrap>
<v-subheader class="">
Section
</v-subheader>
<v-flex xs12 v-for="n in 20">
<v-text-field
label="Field Name"
outline
>
</v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-card-text>
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For me this is work (Vuetify version 2)
Add scrollable prop in <v-dialog>
inside <v-card> use <v-card-title> instead of <v-toolbar>
then your <v-toolbar> put inside <v-card> and remove fixed prop in <v-toolbar>
Last, add class="pa-0" in <v-card-title> for removing the padding in v-card-title element
<template>
<!-- Add Scrollable Prop -->
<v-dialog scrollable :value="createToggle" #input="onCancel" persistent :fullscreen="$vuetify.breakpoint.xsOnly" :max-width="dialogWidth">
<v-card>
<v-card-title class="pa-0">
<v-toolbar flat>
<v-toolbar-title>Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon class="heading grey--text text--darken-4">close</v-icon>
</v-btn>
</v-toolbar>
</v-card-title>
...
<v-card-actions>
<v-btn>Cancel</v-btn>
<v-btn>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
For browsers that support position: sticky (https://caniuse.com/css-sticky), you can use pure CSS to set the toolbar to be sticky positioned at the top:
.v-dialog > .v-card > .v-toolbar {
position: sticky;
top: 0;
z-index: 999;
}
You could write this selector differently if you didn't want this applying to all situations where this occurs in your application - add a specific class to your toolbar, for example.
In my case, fixed title was not working until I did not wrap my div in v-card-text
<template>
<v-dialog v-model="modal" scrollable fullscreen>
<v-card>
<v-card-title>
<span>Title text</span>
</v-card-title>
<!-- VCardText after VCardTitle -->
<v-card-text>
<div>
...
</div>
</v-card-text>
</v-card>
</v-dialog>
</template>
PS. the Vuetify semantic is very important for correct working all of features (ex. using v-card-actions in v-card instead of custom div)
I'm trying to replicate the layout of a Flexible toolbar and card toolbar as shown in https://vuetifyjs.com/en/components/toolbars#example-flexible-and-card, but I want the card content grow up to full screen height, and then scroll its content.
I could make it scroll here https://codepen.io/anon/pen/rvwNbr, but I had to set a fixed max-height in pixels:
<v-card-text style="max-height: 250px; overflow-y: scroll">
what I wanted is that the card could grow up to full height before starts scrolling. then, I tried wraping the external v-card in a v-content with "fill-height" attribute, according to https://vuetifyjs.com/en/layout/grid but it didn't work
any suggestions?
This isn't the best solution for sure but it might nudge you in the right direction.
A solution using all flexboxes would be way better but I can't seem to get it to work with flexboxes..
<template>
<v-app id="inspire">
<v-card flat class="fill-height">
<v-toolbar color="primary" dark extended flat>
<v-app-bar-nav-icon></v-app-bar-nav-icon>
</v-toolbar>
<v-card class="mx-auto card--flex-toolbar" max-width="700">
<v-toolbar flat>
<v-toolbar-title class="grey--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon>
<v-icon>mdi-magnify</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card-text class="card-body">
<p v-for="p in 30" :key="p">article paragraph {{ p }}....</p>
</v-card-text>
</v-card>
</v-card>
</v-app>
</template>
<script>
export default {};
</script>
<style>
.card--flex-toolbar {
margin-top: -62px;
}
.card-body {
overflow-y: auto;
max-height: 85vh;
}
</style>
Check out the layout.vue in the codesandbox here. The v-card-text will go down to the bottom of the screen and then starts scrolling the content. Feel free to change the value in the v-for loop and watch the card grow/shrink.