Change border color when hover textfield - vue.js

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;
}

Related

How do i go down a line in v-combobox - vuetify

I'm using v-combobox to view a list of v-chip and it looks like this:
I want to add a line break between each chips.
Here is my code:
<v-combobox
:append-icon="false"
style="
padding-right: 30px !important;
padding-left: 30px !important;
"
:search-input.sync="search"
v-model="chips"
:items="items"
chips
clearable
color="#0D47A1"
label="Your actions..."
multiple
readonly="true" :key="chips.name">
<template
v-slot:selection="{ attrs, item, select, selectedSetups }"
style="font-size: 14px; font-family: 'Segoe UI Emoji'">
<v-chip
class="list-group-item"
v-bind="attrs"
:input-value="selectedSetups"
color
label
close
#click="select"
#click:close="RemoveRequirement(item)"
outlined>
<span>{{ item.category }}</span>
<v-divider
class="mx-4"
color="black"
inset
vertical
v-show="item.value.toString() != ''"></v-divider>
<span>{{ item.value.toString() }}</span>
</v-chip>
</template>
</v-combobox>
Any idea on how to achieve that please?
I found a way to do this using css, but this also shifts the dropdown down with every selection. That is probably not desired. Try it out and see for yourself:
div[role=combobox] .v-select__slot .v-select__selections {
display: flex;
flex-direction: column;
align-items: flex-start;
}

How to target a blank link within the label attr with vue?

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>

Icon position switching left right automatically on removing position:absolute

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;
}

Set height vuetify textfield according to design

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;
}

How to position element within a column to end (Vuetify)?

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.