I have a textarea and I found that it has top margin.
like this..
this is my code:
<v-flex d-flex xs12>
<v-textarea
v-model="test"
outline
type="text"
color="primary"
v-validate="{required: true}"
data-vv-name="test"
:error-messages="errors.collect('test')"
> </v-textarea>
</v-flex>
I tried adding class="mt-0" to v-textarea but it did not work.
Does anyone know how to remove and why I have this top margin?
I am using version 1.5.x
Thanks!!
Not the best practice but you can inspect elements and find which class adds the margin.
Then add custom class on textarea.
.your-class >>> .textarea-class-that-you-found {
margin-top: 0
}
Related
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
I want to remove margin left and right from v-container so I add pa-0 class.
Also I need to have a space between each element so I using grid-list-sm.
<div id="app">
<v-app id="inspire">
<v-container fluid grid-list-sm class="pa-0">
<v-layout row wrap>
<v-flex v-for="i in 6" :key="i" xs4>
<img :src="`https://randomuser.me/api/portraits/men/${i + 20}.jpg`" class="image" alt="lorem" width="100%" height="100%">
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
The problem is grid-list-sm is reducing size to 4px in <v-layout row wrap> because margin -2px. and makes the v-layout to be widther than his parent.
I do not want to use overflow-x:hidden. I just want the elements to align correctly.
So, how I can solve this problem? (without workaround)
You can overwrite the attribute in the class where you are using it, as follows, it is overwritten in the css file of your class, or you can make a css file with the code and include it in each class where you need it
.row{
margin-right: 0px
}
When looking at the following Vuetify code
<v-layout align-center justify-center row fill-height>
<v-flex xs1>
<v-icon color="primary">clear</v-icon>
</v-flex>
<v-flex xs8>
<p>Text</p>
</v-flex>
<v-flex>
<v-btn rounded color="primary">Do Something!</v-btn>
</v-flex>
</v-layout>
(for more context:
https://codepen.io/anon/pen/xNvzbQ)
"Text" is not vertically centered
But when replacing
<v-flex xs8>
<p>Text</p>
</v-flex>
with
<v-flex xs8>
Text
</v-flex>
it suddenly is.
I also could not center it with align-items: center or align-content: center in the surrounding div.
Whats the reason behind this behavior?
It IS actually centering the p tag. Like other's has pointed out. The p tag has a default bottom margin, so it just makes it look as if it's not centered vertically.
See below image, where the orange highlight is actually the bottom margin of the p tag.
Notice how it's actually vertically centered.
So, you can fix this by either:
Remove the p tag altogether like you said
Use div tag instead, which doesn't have a margin
Just set the style of the p tag to have margin-bottom: 0
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:
I'm trying to create a download button with an icon on it, using Bootstrap 4 and Font awsome for the icon.
The thing is when I add the icon using:
<i class="fa fa-mobile fa-3x pull-left" ></i>
it pushes the text out of the button, and I can't get the button width to grow with the contents.
Here is my jsFiddle:
http://jsfiddle.net/x1hphsvb/48/
That's because you are floating your <i> element.
Remove the pull-left class from <i> and try this:
<a class="d-inline-flex flex-nowrap">
</a>
And add a margin class to your txtAppStore div. For example:
<div id="txtAppStore" class="ml-3"></div>
Working fiddle: http://jsfiddle.net/x1hphsvb/50/
The main issue was that i had the following CSS, that I missed, and was limiting my button size:
.black-background {
background-color:#000000;
padding: 6px;
width:150px;
}
I've comment that out, and did some changes accoding to the first answer, and now it looks goot, Thank you!
http://jsfiddle.net/dumitrudan608/x1hphsvb/52/
just define width for #txtAppStore, or put that all to Bootstrap div like col-md-3 and center it, then inside col-md-3 you can putt this button with width: 100%; and for example inside txt for 80% of width.
Quickest solutions but not "auto" is:
#txtAppStore {
width: 150px;
}