I'm using a Vuetify table and based on a configuration I want to set fixed column widths. I thought it would be fine to assign the width from the configuration to the width CSS attribute. The first example ( Playground…
On my page, I have an "edit" button on my page, when I click on it I can edit few things and then save or close without saving. I want to add a loading bar (like the page is loading)…
I'm using a Vuetify text-field component inside a table with many columns. It is possible that this component contains too much content to be displayed and from a UX perspective it takes too much time to check the content by…
I am trying to implement a sidebar expandable menu with Vuetify2 as shown in the docs, however after hours of struggling and trying different suggested in the docs options couldn't find a way to make the expanded menu overflow and…
I'm using Vue 3 with a Vuetify table and whenever I modify data I have to fetch everything again. If you modify a cell inside row 123 and column 456 reconstructing the whole grid is annoying because the table scrollbars…
Using vue2.6, vuetify 2.3, I have a v-select menu with a list of module names and for the item-text I want to change from displaying a single value to a value with 2 field combined together connecting with a hyphen.…
I have a radio button field on 3-4 pages, the pages contains same radio buttons but different content below. The radio buttons have a default value, and I want to save the checked value so that when I refresh or…
I'm using vuetify + nuxt to create my web application, how could I apply an animation to a cell if its value changes? I tried to add a ref to my table element like: <v-data-table ref="table" :items="data" :headers="headers"/> and then…
Here is a codepen: https://codepen.io/spierepf/pen/ExdvXYY?editors=101 <div id="app"> <v-app id="inspire"> <v-card> <v-container fluid> <v-row align="center" > <v-col cols="12"> <v-autocomplete :items='items' :search-input.sync='search' v-model="selectedItem" @change="$emit('itemSelected', selectedItem)" ></v-autocomplete> </v-col> <v-col cols="12"> </v-col> <v-col cols="12"> </v-col> </v-row> </v-container> </v-card> </v-app> </div> function bggId(itemElement) { return…
I have a component for v-select, for example like this <v-container> <v-row> <v-col> <v-select class="no-border" variant="underlined" label="Select" :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']" ></v-select> </v-col> </v-row> </v-container> And i try to remove using css like this .v-input--underlined .v-input__control { border:…