I have vuetify textfield with 1.5.x version in my codepen: https://codepen.io/handy29/pen/yLLwjGg but the height of textfield is not according to my design . I also already follow this link as you can see in my code (html) the text field is still the same. My code so far in css:
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
border-width: 1px;
}
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;
}
my code in html:
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md3>
<v-text-field
width="700px;"
height="-1"
outline
single-line
></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-app>
</div>
what should I do? Thanks
You must unset css property min-height in the v-input__slot class and set the height property:
.v-input__slot {
min-height: unset;
height: 30px;
}
Related
I have this very simple chat app here:
It contains of a Header and then v-main. Inside v-main I first have a v-container containing a v-card. This v-card element has the Name as an title, then a v-list containing the messages, and finally, divided by an v-divider a simple v-form. The end of v-app also contains a v-footer.
Treeview:
v-app
v-app-bar
v-main
v-container
v-card
v-card-title
v-divider
v-list
v-divider
v-form
v-footer
Current code inside v-main->v-container:
The v-containersimply has the fluid property on it.
<template>
<v-card>
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list
class="overflow-y-auto"
v-for="msg in $store.state.messages"
:key="msg.id"
>
<v-list-item>
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form v-model="valid" ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
:rules="messageRules"
:counter="maximumLength"
required
rounded
flat
background-color="primary"
color="tertiary"
#keydown.enter="validateAndSend"
></v-text-field>
</v-col>
<v-col :cols="1">
<v-btn
:disabled="!valid"
color="tertiary"
#click="validateAndSend"
icon
large
fab
>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Question:
Can I maximize the height of the v-list-element, so that my v-form will always end right above the start of the v-footer, regardless of the contents of v-list? I don't have the height of v-list set yet (I think this is the problem, but unsure which height to choose).
I don't want there to be a huge gap between my "content" and the footer.
Also, when there are more messages than in the image, the v-list will simply list them (won't cut off), which then of course pushes down the v-form and the v-footer.
I am very unsure how to do this and couldn't really find anything on google or the vuetify website.
It is not important that the messages are wrapped in a v-list-component. I just need a way to scroll through messages, if necessary.
Additional information:
I am very new to vuetify and I am using nuxt.js (don't think that's important though).
Height of card:
This layout create scroll card for screen height. You need to set property fill-height for v-container.
Then you need to style card by position: absolute
<v-container fluid fill-height>
<v-card class="card">
...
</v-card>
</v-container>
Styles:
.card {
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 14px;
}
Stretching list in card:
Now you need to stretch v-list. I moved v-for from v-list to v-list-item. Then I just added
d-flex and flex-column on v-card. Last step is stretch the list by mt-auto
<template>
<v-card class="card d-flex flex-column">
<!-- Card Title -->
<v-card-title>
{{ messageInfo.sender }}
</v-card-title>
<v-divider></v-divider>
<!-- Messages -->
<v-list class="overflow-y-auto mt-auto">
<v-list-item v-for="msg in messages" :key="msg.id">
<Message :message="msg" :isSender="isSender(msg)" />
</v-list-item>
</v-list>
<v-divider></v-divider>
<!-- Send Messages -->
<v-form ref="form">
<v-container>
<v-row justify="center">
<v-col :cols="10">
<v-text-field
v-model="messageInfo.message"
required
rounded
flat
background-color="primary"
color="tertiary"
/>
</v-col>
<v-col :cols="1">
<v-btn>
<v-icon>mdi-message</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-form>
</v-card>
</template>
Scrolling list from bottom to top (pure css):
You also need to reverse scroll for list. You can easily do it by pure css with transform: rotateX(180deg)
Template:
<v-list class="overflow-y-auto mt-auto scroll-container">
<v-list-item class="scroll-container-item" v-for="msg in messages" :key="msg.id">
...
</v-list-item>
</v-list>
Styles:
.scroll-container {
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}
.scroll-container-item {
-webkit-transform: rotateX(180deg); /* Safari and Chrome */
-ms-transform: rotateX(180deg); /* IE 9+ */
-o-transform: rotateX(180deg); /* Opera */
}
Neither establish a space immediately before or within a link nor any kind of link works fine while using links within the label attribute - It only checks the box. Using mousewheel works. How to target a new tab with simple leftclick?
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'Its required!']"
label=""
required
>
<template v-slot:label>
URL_A
<v-btn href="/#/URL" target="_blank" > URL_B </v-btn>
<navigation-link url="/#/URL" target="_blank">
URL_C
</navigation-link>
</template>
</v-checkbox>
This will not work. When you associate a <label> element with a checkbox <input> (which is what Vuetify is doing behind the scenes), clicking on the label is supposed to toggle the value of the checkbox. It cannot also be a link because then the click action would be ambiguous. If someone clicks the link, should it open the link or toggle the checkbox? It appears that toggling the checkbox wins in this case.
If you need link text to go next to your checkbox, it has to be its own separate element. You can use CSS to get the two elements to line up:
<v-row>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
>
<template #label>
This link cannot be clicked
</template>
</v-checkbox>
</v-col>
<v-col cols="12">
<v-checkbox
v-model="checkbox1"
class="pa-0 ma-0"
color="primary"
:rules="[v => !!v || 'Its required!']"
required
style="float: left;"
></v-checkbox>
This link CAN be clicked
</v-col>
</v-row>
There's a working demo in this codeply.
Just use #click.stop on the link:
<v-checkbox v-model="checkbox">
<template v-slot:label>
<a href="/#/URL" target="_blank" #click.stop> URL_A </a>
</template>
</v-checkbox>
It´s done by using a modal:
<v-container v-if="showModal" class="modal-mask white--text">
<transition name="modal">
<v-container >
<v-container class="modal-wrapper">
<v-container class="modal-dialog">
<v-container class="modal-content">
<v-container class="modal-header">
<h4 class="modal-title">Title</h4>
</v-container>
<v-container class="modal-body">
Lorem ipsum
</v-container>
<v-container two-line>
<v-btn color="primary" class="close" #click="showModal=false">
<span>Close</span>
</v-btn>
</v-container>
</v-container>
</v-container>
</v-container>
</v-container>
</transition>
</v-container>
<script>
export default {
data: () => {
return {
showModal: false
}
}
}
</script>
<style>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0%;
left: -10px;
height: 100%;
max-width: none;
background-color: rgba(0, 0, 0, .8);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: top;
}
.modal-dialog{
overflow-y: initial !important
}
.modal-body{
height: 500px;
overflow-y: auto;
}
</style>
I am using the Vuetify tooltip feature.
The span message appears like this as below(image 1). Here in the CSS I checked .tooltip__content {
position: absolute; }. So I changed it relative as .tooltip__content {position: relative;}. But now the issue I am facing is the icon keeps switching positions as in image 2 on hover over the icon. What did I do wrong?
<v-container fluid>
<v-layout row wrap>
<v-flex xs11 md6 class="add-col-padding-right">
<v-text-field
label='Demo'
v-model='dummy.info'
>
</v-text-field>
</v-flex>
<v-flex xs1 md6 class="add-col-padding-left">
<v-tooltip attach>
<a href='javascript:void(0);' slot="activator">
<i class="material-icons icon-black">
message
</i>
</a>
<span>Please enter the user information correctly.</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
Probably nothing wrong, Vue likely just has a CSS rule for on hover. Try adding your own to override it:
v-tooltip:hover {
position: relative;
}
I have vuetify textfield with 1.5.x version in my codepen: https://codepen.io/handy29/pen/yLLwjGg when you hover to text field I want to be green color #6fbd44. My code so far (css):
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot {
border-width: 1px;
}
.theme--light.v-text-field--outline > .v-input__control > .v-input__slot:hover {
border-style: solid;
border-color: #6fbd44;
}
html:
<div id="app">
<v-app id="inspire">
<v-form>
<v-container>
<v-layout row wrap>
<v-flex xs12 sm6 md3>
<v-hover>
<v-text-field
outline
single-line
></v-text-field>
</v-hover>
</v-flex>
</v-layout>
</v-container>
</v-form>
</v-app>
</div>
I am using :hover but it still not working, it stay black border color. What should I do? Thanks
In vuetify textfield's hover state has been covered with following selector which is more specific selector for your textfield. So that it blocked your css rule.
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover
In order to bypass the styling of vuetify for textfield hover you can use same selector in your css file.
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover{
border-width: 1px;
border-style: solid;
border-color: #6fbd44;
}
How to position both buttons below at the end of their respective columns ?
By default, the buttons are positioned to start in each column.
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-row justify="center"
style="border: 1px solid;">
<v-col
cols="12"
sm="4"
style="border: 1px solid red;"
>
<v-btn>Ok</v-btn>
</v-col>
<v-col
cols="12"
sm="4"
style="border: 1px solid blue;"
>
<v-btn>Cencel</v-btn>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
Codepen.
Just add align="end" to each of v-col.
Here is the working codepen.
Because v-col is just display: flex; flex-direction: column;. Instead of v-row you use justify to align elements, in v-col you use align.
Option 1: Add class="text-right" to both <v-col> elements if you want to position inline elements such as text.
Option 2: Add class="d-flex justify-end" to both <v-col> elements to position block elements.
Since the <v-btn> element is most likely displayed as an inline-block element, both options will work.