Text-color for v-autocomplete - vue.js

I have a v-autocomplete that only displays after I click on a loop button in my navbar.
My application is supposed to allow the search on actors. I have a placeholder on this autocomplete and I'd like to style the appearance of it.
At the moment it is black and in regular font, I'd like it white in italic but since I can't inspect the element I can't know which class to edit in the css.
Here's my code:
<template>
<div class="inspire">
<v-app-bar style="padding: 10px 0px;"
color="rgba(33,33,33,255)"
elevation="0"
height="64px"
>
<div style="width:100%" v-if="$route.name == 'Mapping'">
<template>
<v-autocomplete
v-model="valuesActor"
placeholder="Search on actors"
:items="actorArray"
:search-input.sync="searchActor"
filled
autofocus
mutliple
#blur="toggleSearch"
background-color="#313131"
append-icon=""
prepend-inner-icon="mdi-arrow-left"
color="var(--textLightGrey)"
:menu-props="{maxWidth: 1600}"
>
</v-autocomplete>
</template>
</div>
</v-app-bar>
</div>
</template>

You can style it like this-
<style scoped>
>>> ::placeholder {
color: white !important;
font-style: italic !important;
}
</style>

color props of the vuetify v-autocomplete component shoud be a string. https://vuetifyjs.com/en/api/v-autocomplete/#props-color
So either use material color name or css color in this color props field, or use style directive style="'color:var(--textLightGrey);'".
You could also use vuetify class heler: https://next.vuetifyjs.com/en/styles/colors/

Related

Vue tab change text color for active class

I want to change the text color of the active tab.
Using Vue.js + Vuetify
I created an .active CSS class. The interesting part is that background-color property for active classes work, but the text color (color) doesnt change when active.
How should I change the code so that both properties apply for the active class ?
style
.active {
color: #222222;
background-color: #ffff;
}
template
<v-tabs
background-color="#FFFFEA"
slider-color="#C89933"
optional
right
active-class="active"
>
<v-tab
class="normalize font-weight-bold "
to="/tab1"
>
Tab 1
</v-tab>
<v-tab
class="normalize font-weight-bold"
to="/tab2"
>
Tab 2
</v-tab>
<v-tab
class="normalize font-weight-bold"
to="/tab3"
>
Tab 3
</v-tab>
</v-tabs>
A default color comes from the Vuetify component itself. To override the color you can use !important flag after the color value.
.active {
color: #222222 !important;
background-color: #ffff !important;
}
If all your tabs route to a url link in which you can check your current $route.name and confirm it is the current active one. Use a ternary expression to choose the class to render. Do something like the below.
<a
#click="this.$router.push('http://localhost:8081/')"
href="#"
class="
hover:bg-papaDark-700
text-white
hover:text-gray-200
"
:class="$route.name === 'Home' ? 'border-l-6 border-gray-200 ' : ''"
>
In which 'Home' would be your route component name for 'locahost:8081/'. For example.
Tell me if it works

Vuetify how to add the styles to a label inside of a v-checkbox

I am having trouble giving the label styles inside of my vuetify v-checkbox component. Here is the documentation https://vuetifyjs.com/en/components/checkboxes/. I basically want to use CSS to change the color of the text that goes in the "label" part of the checkbox. Thank you
You could target the checkbox's label with the .v-input__control .v-label selector:
.v-input__control .v-label {
color: red;
}
demo
You can use the label slot of v-checkbox to style it however you want:
<v-checkbox>
<template slot="label">
<div style="color: red">
label
</div>
</template>
</v-checkbox>

Scrollable dropdown on nav item in Vue

I am using Vue.js 2.6 and I have a tab reports.
I want to vertically scroll my report options when there are more than three options.
If it helps - all those b-dropdowns are translated to li's with anchors inside when I inspect those in the browser.
<template>
<b-navbar-nav>
<b-nav-item">
<router-link to="/logs" class="nav-link">General Logs</router-link>
</b-nav-item>
<b-nav-item-dropdown right class="nav-link">
<template slot="button-content">
<span>Reports</span>
</template>
<b-dropdown-item>Foo</b-dropdown-item>
<b-dropdown-item>Bar</b-dropdown-item>
<b-dropdown-item>Foo2</b-dropdown-item>
<b-dropdown-item>Bar2</b-dropdown-item>
<b-dropdown-item>Foo3</b-dropdown-item>
<b-dropdown-item>Bar3</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</template>
try this:
.navbar-nav .dropdown-menu {
overflow: auto;
height: 100px;
}

How to make an append item always visible in v-select vuetify

I have a vuetify v-select dropdown.
Inside I made a slot #append-item in which I have a button "validate"
I want the button to always be visible when I scroll inside the dropdown.
Wrap your button with a div having the append class name :
<template #append-item>
<div class="append">
<v-btn color="primary">valider</v-btn>
</div>
</template>
that class should have the following css rules :
.append{
position:sticky;
bottom:8px;
width:100%;
display:flex;
justify-content :center;
background :white;
}
LIVE DEMO
I added this style to my "validate" button and it worked:
.append {
position: sticky;
bottom: 0;
background: white;
}
<template #append-item>
<div class="append">
<v-btn color="primary">
Validate
</v-btn>
</div>
</template>

VuetifyJS vertical button text

I'd like to have text below the icon in a v-btn and can't seem to find how to do this. How is this possible?
To achieve this look with Vuetify, you just need to overwrite the flex direction in the v-btn__content class. Don't forget to give a unique class (for me flexcol) to your button so the style change won't affect other Vuetify buttons.
<template>
<v-btn class="flexcol" icon height="100" width="100">
<v-icon> mdi-tools </v-icon>
<span> Tools </span>
</v-btn>
</template>
<style>
.flexcol .v-btn__content {
flex-direction: column;
}
</style>
You don't really need vuetify to do that.
You can just use css and flexbox.
Say you have:
<div class="wrapper">
<div>Text Above</div>
<div>Text Below</div>
</div>
You want the "Text Below" to stand below the "Text Above".You can do it like this:
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
However click here to see your solution
Try this
<div class="d-flex flex-column align-center">
<v-btn icon height="30">
<v-icon>mdi-history</v-icon>
</v-btn>
<p class="mb-0">abc</p>
</div>