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>
Related
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/
I am using Vuetify beta version (v3.0.0-beta.6) because I have to use Vue 3 and Vuetify 2.x is not supported by it.
I want to create an i18n selector with the country flag icon.
To manage i18n I use the vue-i18n library.
As mentioned in vue-i18n it is very simple to create this selector (https://vue-i18n.intlify.dev/guide/essentials/scope.html#locale-changing).
So what I'm doing is using the Vuetify <v-select> component to add my customization.
The problem is that the component looks the way I want it, but the selection behavior breaks.
There my code:
<template>
<v-select class="language-select" v-model="$i18n.locale" :items="$i18n.availableLocales" #change="setLocale($event)"
hide-selected variant="plain">
<template v-slot:selection="{ item }">
<v-icon> {{ getFlag(item) }} </v-icon>
</template>
<template v-slot:item="{ item }">
<v-list-item :key="`locale-${item.value}`" :value="item.value" :prepend-icon="getFlag(item)"
:title="getItemCaption(item)">
</v-list-item>
</template>
</v-select>
</template>
<script setup lang="ts">
import { useLocaleStore } from "#/stores/locale"
import selectCaption from "#/i18n/language-select-caption.json"
function setLocale(event: Event) {
useLocaleStore().setLocale((<HTMLInputElement>event.target).value);
}
function getFlag(locale: any) {
const xx = locale.value === 'en' ? "gb" : locale.value;
return "fi fis rounded-icon fi-" + xx;
}
function getItemCaption(locale: any) {
return selectCaption[locale.value];
}
</script>
<style lang="scss">
.language-select {
max-width: 60px;
margin-top: 35px;
}
.rounded-icon {
border-radius: 50%;
font-size: 24px;
}
</style>
NOTE: I need to use <v-list-item> in the item slot becasuse if I remove it all items are showed on the same line, as unique option.
Any idea on what i'm doing wrong?
Try adding adding v-bind to your v-list-item
<template v-slot:item="data">
<v-list-item
v-bind="data.props"
:key="`locale-${data.item.value}`"
:value="data.item.value"
:prepend-icon="getFlag(data.item)"
:title="getItemCaption(data.item)">
</v-list-item>
</template>
(edited for vuetify 3, per Jerod's comment below)
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>
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;
}
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>