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.
Related
I'm new to Vue and Vuetify and this is probably something obvious, but I'm googling it for over an hour and I'm still stupid.
So basically I want to create wrapper using full height of viewport with one element aligned top, and one bottom (This will be inside v-navigation-drawer, few buttons on top and one bottom)
Here's sample code
<v-container fluid fill-height>
<v-row align="start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row align="end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
And this is how it looks https://codepen.io/rafal_w/pen/ExXeeWm
As you can see fill-height tag positions elements evenly with margins, and align tag on elements doesn't work. What do i do wrong?
In my opinion the better way to do this with Vuetify is the following:
<v-app id="app">
<v-card height="1000">
<v-app-bar
color="red"
dense
fixed
flat
dark
>
<v-spacer></v-spacer>
<span>Align Top</span>
<v-spacer></v-spacer>
</v-app-bar>
</v-card>
<v-bottom-navigation fixed color="green">
<v-spacer></v-spacer>
<span>Align Bottom</span>
<v-spacer></v-spacer>
</v-bottom-navigation>
</v-app>
Ok, so instead of align tag on child items, i was supposed to use align-self-start and align-self-end classes
https://codepen.io/rafal_w/pen/WNOaXVL
<v-container fluid fill-height>
<v-row class="align-self-start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row class="align-self-end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
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)
}
}
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.
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.
I'd like to have two floating action buttons in the lower right corner, one above the other (like google maps).
Currently I'm using a fixed style bottom offset to do this on one of the buttons, like so:
<v-btn fab fixed bottom right>...</v-btn>
<v-btn fab fixed bottom right style="bottom: 90px">...</v-btn>
...to achieve this, but I don't want to hardcode the 90px, I'd really rather say "I want two Floating Action Buttons, one vertically above the other".
Is there a vuetify-way to go about this?
You can put them inside another element with a bit of custom CSS for positioning:
<template>
<v-layout column class="fab-container">
<v-btn fab>
<v-icon>add</v-icon>
</v-btn>
<v-btn fab>
<v-icon>remove</v-icon>
</v-btn>
</v-layout>
</template>
<style>
.fab-container {
position: fixed;
bottom: 0;
right: 0;
}
</style>
https://codepen.io/anon/pen/KyJzQP?editors=1100
You can apply a class tag like this:
<template>
<v-card>
<v-card-text style="height: 100px; position: relative">
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small>
<v-icon>mdi-bookmark-outline</v-icon>
</v-btn>
</v-fab-transition>
<v-spacer />
<v-fab-transition>
<v-btn color="grey" dark absolute top right fab small class="mr-6">
<v-icon>mdi-heart-outline</v-icon>
</v-btn>
</v-fab-transition>
</v-card-text>
</v-card>
</template>