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
Related
I have a container with display: flex, and it childs height, is higher than it content.
I'm using Vuetify (vuejs)
For example:
I have a v-col with 2 span
<v-col style="display:flex;flex-direction:column">
<span style="background-color:green;font-size:0.4rem">134 POSTS</span>
<span style="background-color:green;font-size:0.4rem">120 POSTS</span>
</v-col>
If I put flex-direction to column, then:
height of spans is greater than it content!
If I put flex-direction to row, then:
the same happens.
I expect that the span height is only his content height
Edit:
I try again and the problem is only when I try to put inside display flex column inside a card: here is the code to try in vuetify
<v-card>
<v-card-title>
<v-row>
<v-col class="d-flex" style="flex-direction: column">
<span style="font-size: 0.6rem"> 123123 </span>
<span style="font-size: 0.6rem"> 123121 </span>
</v-col>
</v-row>
</v-card-title>
</v-card>
Solution:
I found the solution, v-card-title have a class with line-height, the solution is edit this line-height
In Vuetify, v-card-title class has a line-height: 2rem set by default, editing this one fixed the issue!
I'm trying to prevent two scroll bars appearing when using Vuetify's sheet and calendar.
Here is my code:
<template>
<v-app>
<v-main>
<v-container fluid class="fill-height">
<v-row justify="center" class="fill-height">
<v-col cols="12" class="fill-height">
<v-sheet class="fill-height">
<v-calendar type="week" />
</v-sheet>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</template>
Just override the CSS of Vuetify Calendar Component to remove a redundant scroll-bar:
.v-calendar-daily__scroll-area {
overflow-y: hidden !important;
}
Also remove the class="fill-height" from the v-sheet , it make a bit overlap for calendar. I don't know why you added it.
Check it out here:
https://codepen.io/nmdatit/pen/OJpdwox
I have a text field and on right of the text field a button is appended.
My issue is that the button has a top margin and is not in line with the text field. As you can see in the following picture, the button is too low.
Example:
Question:
How can i align the button with the text field in a native way?
I tried applying class="mt-0" to the button but that did not change anything.
Code:
<v-row>
<v-col md="6" offset-md="3">
<v-text-field class="pt-5" placeholder="Strawberries" outlined clearable>
<!-- <template slot="append">
<v-icon>clear</v-icon>
</template> -->
<template slot="append-outer">
<v-btn dark x-large color="pink"> SEARCH </v-btn>
</template>
</v-text-field>
</v-col>
</v-row>
Thanks for your help!
Using d-flex is better than v-row as v-row removes spacing and other stuff.
<div class="d-flex">
<v-text-field class="pt-5 mr-2" placeholder="Strawberries" outlined clearable></v-text-field>
<v-btn dark x-large color="pink"> SEARCH </v-btn>
</div>
v-row
d-flex
use this:
<v-row>
<v-text-field class="pt-5" placeholder="Strawberries" outlined clearable></v-text-field>
<v-btn dark x-large color="pink"> SEARCH </v-btn>
</v-row>
I had the same problem, but the only simple solution I could find was to add hide-details to the v-text-field. But unfortunately this removes the validation messaging if this is something you need.
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 was trying to get a responsive carousel with a working fade transition but quickly found out that if you have your height set to auto you mess up the transition (next image blinks underneath) and if you don't you lose responsiveness StackOverflow Question About this. Right now I am trying to figure a way to get both the transition (first image where image is cropped but transitions perfectly) AND the responsiveness (second image where the image is responsive and fills the div with height auto but the transition is not right) right and it has been suggested that I should wrap them and let the grid figure it out. I need a little help with this.
<v-row>
<v-col cols="1">
<v-btn icon large #click="toggle">
<v-icon>{{icon}}</v-icon>
</v-btn>
</v-col>
<v-col>
<v-slider
color="light-green"
thumb-color="light-green accent-4"
thumb-size="30"
track-color="light-green accent-4"
v-model="run"
max="2"
:tick-labels="ticksLabels"
tick-size="6"
ticks/>
</v-col>
</v-row>
<v-carousel
:cycle="playPause"
interval=3000
v-model="run"
hide-delimiter-background
show-arrows-on-hover
>
<v-carousel-item
transition="fade-transition"
reverse-transition="fade-transition"
v-for="(item,i) in items"
:key="i"
>
<v-row>
<v-spacer/>
<img width="75%" :src="item.src"/>
<v-spacer/>
</v-row>
</v-carousel-item>
</v-carousel>
<v-card>
<v-card-text>
{{ sampleText }}
</v-card-text>
</v-card>