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.
Related
I'm building an app in Vuejs 3 w/ Vuetifyjs 3 and I'm running into the problem where the density="compact" row size between a v-checkbox and v-radio has a huge difference. Look at the image below, it is from two different v-cards, using v-lists. All the code is exactly the same, with the only difference that one uses v-radio and the other v-checkbox. How can I make force the v-checkbox to have the exact same lineheight as the v-radio? CSS hacks are acceptable.
I read in another post that I should wrap them in a v-layout but that has no effect.
Radio button code:
<v-card>
<v-card-title>
CARD TITLE GOES HERE
</v-card-title>
<v-list density="compact">
<v-list-item>
<v-sheet>
<v-row>
<v-col cols="2">
<v-layout>
<v-radio density="compact" dense inline></v-radio>
</v-layout>
</v-col>
<v-col cols="6">
{{ model.productName }
</v-col>
<v-col cols="4" class="center-content text-h7 text-red font-weight-bold">
€ {{ model.price }}
</v-col>
</v-row>
</v-sheet>
</v-list-item>
</v-list>
</v-card>
Checkbox code:
<v-card>
<v-list density="compact">
<v-list-item>
<v-sheet>
<v-row>
<v-col cols="2">
<v-layout>
<v-checkbox-btn density="compact" hide-details="true" inline></v-checkbox-btn>
</v-layout>
</v-col>
<v-col cols="6">
{{ model.productName }}
</v-col>
<v-col cols="4" class="center-content text-h7 text-red font-weight-bold">
€ {{ model.price }}
</v-col>
</v-row>
</v-sheet>
</v-list-item>
</v-list>
</v-card>
Uh, I have struggled with that too.
You can try <v-checkbox hide-details/>. A lot of the space is taken up by the message area from v-input, and setting the hide-details attribute will hide the area when there are no messages. Checkboxes will not align with inputs anymore though.
If that is not enough, you can unset the min-height from the element. This will align with v-radio (If you change css in scoped styles, you need to use the deep selector to target nested elements):
<style scoped>
.container-class :deep(.v-checkbox .v-selection-control) {
min-height: unset;
}
</style>
Here is an overview (the red bars are message areas):
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 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>
I have some problems aligning my layout. The idea is to have a single set of v-expansion-panels in the same row with a v-btn, and have both of them visually centered inside a card. I almost achieved it in this codepen: https://codepen.io/anzuj/pen/PoPPbdw with this structure:
row
/ \
col col
(panel) (btn)
Problem: v-col's minimum width creates a whitespace around the button, offcentering the card content visually. Would appreciate some help on how to either:
Make the v-col surrounding the v-btn the same width as the v-btn
Solve the layout without grid system
Big thanks for anyone thinking along!
All you have done is right, you just need to warp the <v-container> inside the <v-card-text> so that it gets a proper alignment. Also, the button in right doesn't need to have a col-2 width, it only needs a col-1 width. Since you haven't given any col width for the which wraps the button, it's taking the entire space and hence the container also. Another option is to set the width of the container using css eg: <v-container style="width:600px;">
<v-card color="grey lighten-3">
<v-card-text>
Problem: v-col with the <v-icon color="green">mdi-check</v-icon>button has min col width that off-centers the general look. How can the margins on left and right be visually equal?
<v-container> //Either give a width here style="width:600px;"
<v-row v-for="(item,i) in 5"
:key="i" class="mb-1" no-gutters justify="center">
<v-col cols="10">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>Item</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sit amet
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
<v-col> //or set cols="1" here
<v-btn class="closeBtn mb-1 ml-1" width="36px">
<v-icon color="green">mdi-check</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>
Fixed it by calculating how much width the v-col with the button needs and applied styling in-line in the v-for loop:<v-col cols="1" style="max-width:40px">. Edited pen: https://codepen.io/anzuj/pen/KKddyzy
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