Hello I am trying to create scrollable content in card with flex util classes and components of Vuetify but I am unsuccessful. He is my last version of code which I tried:
https://codesandbox.io/embed/sharp-kilby-g3e4t?fontsize=14&hidenavigation=1&theme=dark
This is my expectation is this:
I found some samples with pure flex but I am not able did it with Vuetify? Can you help me edit codesandbox to make it working? Thank you.
Uses the component=v-virtual-scroll built in Vuetify will be one solution.
for example:
<v-card class="flex-grow-0">
<v-virtual-scroll
:items="Array.from({length: 100}).map((_, index) => index)"
:item-height="50"
height="300"
>
<template v-slot="{ item }">
<v-list-item>
<v-list-item-content>
<v-list-item-title>Item {{ item }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-virtual-scroll>
</v-card>
Updated CodeSandBox
This question is much related to CSS than Vuetify, so let me explain you how you can fix it. Say that your markups render in the browser like below html, either style v-card__text or add your custom class my-list, if you are using v-card__text to style then make sure to add scoped to style tag in your component else this will effect entire project.
<div class="v-card v-sheet theme--light">
<div class="v-card__title">You Title goes here</div>
<div class="v-card__text my-list">
<ul>
<li>Text</li>
...
</ul>
</div>
</div>
<style scoped>
.my-list {
// For eg. here 200px is MainNavBar + TitleBar and some padding/margins
// keep on increasing height if you have more items placed above the v-card
height: calc(100vh - 200px);
overflow-y: auto;
}
</style>
You can set the height to the v-list then make it scrollable using overflow-y: scroll;
<!-- Set height to your `<v-list>` and add `overflow-y: scroll` -->
<v-list style="height: 250px; overflow-y: scroll">
<v-list-item-group color="primary">
<v-list-item v-for="(n) in 100" :key="n">
<v-list-item-content>
<v-list-item-title>Item {{ n }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
I've edited your code and here is a working example at codesandbox.
Here is a sample output of what you want based on your sketch.
Related
I'm using Vue3/Vuetify3, I'm trying to push the text of the v-app-bar about 300px to the right. When I just add a padding to the div element it doesn't do anything. Afaik vuetify works with flexbox, and I'm struggling to understand how to work with this.
Any explanations and/or suggestions would be much appreciated! Thanks in advance!
<v-app>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="d-flex align-center">
<v-avatar
rounded="0"
class="mr-3"
image="https://cdn.vuetifyjs.com/docs/images/logos/v.png"
/>
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
Based on the comments I came up with this, it is also responsive. This should just move the text:
<style>
#media (min-width: 600px) {
.app-bar-text {
margin-left: 300px;
}
}
</style>
<v-app-bar>
<v-container class="d-flex align-center py-0">
<v-app-bar-title class="pl-0">
<div class="app-bar-text">
Example Sentence that should be centered
</div>
</v-app-bar-title>
</v-container>
</v-app-bar>
Vuetify's <v-img> bewilders me. I've got the following:
App.vue
<template>
<v-app>
<v-container>
<v-row no-gutters class="flex-grow-0 justify-end">
<router-link class="ma-8" to="/">Home</router-link>
<router-link class="ma-8" to="/">Features</router-link>
<router-link class="ma-8" to="/">About</router-link>
</v-row>
</v-container>
<v-main>
<router-view />
</v-main>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
//
}),
};
</script>
Home.vue
<template>
<v-container class="center">
<v-row>
<v-col cols="12" sm="8" class="d-flex flex-column justify-center">
<h1 class="text-h3 text-md-h1">Insert catchy phrase here.</h1>
</v-col>
<v-col
cols="12"
sm="4"
class="d-flex flex-column justify-center align-center"
>
<v-img max-height="100%" contain src="../assets/iphone.png"></v-img>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: "Home",
components: {},
};
</script>
<style scoped>
.center {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
My code produces this:
The desktop layout looks great, but when the screen size is smaller, the image wraps and becomes too big.
The desired behavior is for this image to shrink when it wraps so that it still fits inside the viewport. But instead the image is big and extends beyond the viewport.
Upon closer inspection I found that <v-img> is to blame for this strange behavior. Inside of the v-responsive__sizer is this line of styling: padding-bottom: 200%;. When I uncheck this, my image shrinks to fit inside the container and things look like I want them to.
Anyone here familiar enough with vuetify to help me understand how I can achieve my desired behavior?
Best thing would be to do a media query in your styles, so that your app is fully responsive. Otherwise, you can affect that specific vuetify class in your styles. It would look like this: .v-responsive__sizer (or any class you found on the inspect) { padding-bottom: 0% !important} (or any padding you want).
I have a v-dialog, which has a help icon, which when clicked puts a v-overlay over the v-dialog (parent v-card) box to provide help text. In order to position the overlay over only the v-dialog and not the whole application, I set the absolute property.
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-overlay absolute :value="olyHelp" opacity="1">
<v-card #click="olyHelp=false" width="100%" height="100%">
<p>XXXX</p>
</v-card>
</v-overlay>
<v-card-title class="d-flex justify-space-between">
<v-btn class="align-baseline" icon small #click="olyHelp=true"><v-icon small>mdi-help</v-icon></v-btn>
</v-card-title>
<v-card-text>
Regular dialog stuff
</v-card-text>
</v-card>
</v-dialog>
The v-card within the overlay is centered within the overlay and the width and height are ignored. I've tried to set all different css position's on it, but I can't seem to get it to fill up the whole overlay / dialog (parent v-card) space.
Example:
I need to have the v-card fill up the full width and height of the parent v-card/v-overlay
I ran into this same issue and ended up fixing it by modifying the css.
<template>
<v-overlay class="my-overlay">
<v-card width="100%" height="100%">
My content
</v-card>
</v-overlay>
</template>
<style scoped>
.my-overlay >>> .v-overlay__content {
width: 100%;
height: 100%;
}
</style>
I'm trying to add some custom CSS to the .v-responsive__content element within the Vuetify JS card component. I've looked online and can't seem to find a slot for this, I need to set the z-index value of this element manually as I'm using a ::before on the v-card component to add a background overlay.
I'm having some troubles with targeting this, can someone help/advise?
<v-card
class="mx-auto mb-8"
max-width="375"
>
<v-img
class="white--text align-end"
height="200"
:src="source"
>
<v-card-title class="pb-0 mb-n1">Title</v-card-title>
<v-row>
<v-col cols="8">
<v-card-subtitle class="white--text text-truncate py-0">Subtitle</v-card-subtitle>
</v-col>
<v-col class="text-right">
<v-chip
class="chip-custom chip-custom--primary ma-0 mr-4 mt-n2"
color="primary"
text-color="white"
small
>
text
<v-icon right small class="ml-1">mdi-star</v-icon>
</v-chip>
</v-col>
</v-row>
</v-img>
</v-card>
You should be able to access it like this
Add custom class to vuetify component
<v-img
class="white--text align-end custom-image-class"
height="200"
:src="source">...</v-img>
Add Css (sccs syntax here)
.custom-image-class{
.v-responsive__content{
border: 1px red solid;
}
}
It looks a bit weird that you want to add html content within the v-img. If you want the image as background image I would not recommend the v-img component as it is.
I usually use inline style for z-index
Is it possible to reduce the height of the v-select in Vuetify ?
I don't understand why this elements are so big / fat...
My code is :
<template>
<div>
<v-select
outline
dense
v-model="filtresActivites"
:items="activitesGroupees"
item-text="activiteNomComplet"
item-value="activiteCode"
multiple
>
<template v-slot:selection="{ item, index }">
<span v-if="index === 0" class="deep-orange--text">{{ filtresActivites.length }} activités</span>
</template>
</v-select>
</div>
</template>
"You can add height property to your v-select like this:" : it dosn't work
I added .v-select__selections { min-height: 30px } in the style of the component and it dosn't work.
You can add height property to your v-select like this:
<v-select
:items="items"
height=50
></v-select>
If you want to change the css property of v-select, you can do so by adding this class
.v-select__selections {
min-height: 30px
}
The min-height is 42px by default
It is also hard to understand your problem when we cannot see your code
You don't have to use outline style in v-select. Remove it.
Image example from vuetify: