The floating label on an outlined v-select or v-autocomplete is getting cut off.
Is this mis-use on my end, or a bug with Vuetify?
<v-data-table :headers="[{ value: 'name', text: 'name' }]">
<template #[`header.name`]>
<v-select
:value="['a']"
outlined
label="I should not be cut off"
bottom
:items="[{text: 'a', value: 'a'}]"
deletable-chips
small-chips
chips
clearable
multiple
hide-actions
hide-details />
</template>
</v-data-table>
https://codepen.io/codepen123456789/pen/jOKwQKR
You can add some padding to v-select
eg:
<v-select class="pt-1" ...
Related
I'm trying to put a <v-menu> within the header slot of a <v-data-table>.
This menu would then show filter options (v-autocomplete) for that column.
When the menu is clicked, I can't click the autocomplete to show its items, because then the menu closes.
Is this not possible in Vuetify?
I've tried passing :close-on-click="false" and :close-on-content-click="false"
For example (CodePen):
<v-data-table :items="desserts" :headers="headers">
<template #[`header.calories`]>
<v-menu top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on"><v-icon>filter</v-icon></v-btn>
</template>
<v-autocomplete class="black" :items="headers" />
</v-menu>
</template>
</v-data-table>
You can use Event.stopPropagation(), it will prevents further propagation of the current event
Eg:
<v-autocomplete #click="clickOnAutocomplete" class="black" :items="headers" />
...
methods: {
clickOnAutocomplete(e) {
e.stopPropagation();
},
}
....
I'm fairly new to vuetify and was wondering if the append-icon prop of v-text-field can be dynamic based on the valid state of the field. I need 2 options:
Option 1:
If there is an error it can be the red alert icon. If its valid it can change to a green checkmark.
Option 2: Only show the error icon if there is an error else hide it.
<v-text-field
v-model="firstname"
:rules="nameRules"
class="text-field"
append-icon="mdi-alert-circle-outline"
placeholder="Enter first name"
hide-details="auto"
outlined
required
>
</v-text-field>
Check this codesanbox I made: https://codesandbox.io/s/stack-73601258-dynamic-prepend-icon-uq729h?file=/src/components/Example.vue
Vuetify components have a thing called slots that you can modify to extend it's functionality. You can find the available slots for each vuetify component at their API documentation page:
https://vuetifyjs.com/en/api/v-text-field/#slots
In this example I modified the icon append slot
<v-form v-model="validForm" ref="myForm" lazy-validation>
<v-card class="pa-5">
<v-text-field v-model="text" :rules="textRules" label="My text field">
<template v-slot:append>
<v-icon v-if="validForm && text.length > 0" color="green">
mdi-check
</v-icon>
<v-icon v-if="!validForm" color="red">
mdi-alert-circle-outline
</v-icon>
</template>
</v-text-field>
<v-btn :disabled="!validForm" color="primary" #click="submitForm">
Submit
</v-btn>
</v-card>
</v-form>
From vuetify'e example, the icon shows up at right side of each row.
But when I making my own, the arrow showed up at the left side, I havent figured out how to control its position.
My code is like following
<v-data-table
:headers="headers"
:items="inputs"
item-key="id"
disable-pagination
dense
show-expand
single-expand
hide-default-footer
>
<template v-slot:[`item.value`]="{ item }">
<v-progress-linear
height="22"
></v-progress-linear
>
</template>
<template v-slot:expanded-item="{headers, item}">
<td :colspan="headers.length">
<InputDetails
:input="item"
/>
</td>
</template>
</v-data-table>
Added one more header into header list did the magic. { text: '', value: 'data-table-expand' },
I'm new to Vue and Vuetify and this is probably something obvious, but I'm googling it for over an hour and I'm still stupid.
So basically I want to create wrapper using full height of viewport with one element aligned top, and one bottom (This will be inside v-navigation-drawer, few buttons on top and one bottom)
Here's sample code
<v-container fluid fill-height>
<v-row align="start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row align="end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
And this is how it looks https://codepen.io/rafal_w/pen/ExXeeWm
As you can see fill-height tag positions elements evenly with margins, and align tag on elements doesn't work. What do i do wrong?
In my opinion the better way to do this with Vuetify is the following:
<v-app id="app">
<v-card height="1000">
<v-app-bar
color="red"
dense
fixed
flat
dark
>
<v-spacer></v-spacer>
<span>Align Top</span>
<v-spacer></v-spacer>
</v-app-bar>
</v-card>
<v-bottom-navigation fixed color="green">
<v-spacer></v-spacer>
<span>Align Bottom</span>
<v-spacer></v-spacer>
</v-bottom-navigation>
</v-app>
Ok, so instead of align tag on child items, i was supposed to use align-self-start and align-self-end classes
https://codepen.io/rafal_w/pen/WNOaXVL
<v-container fluid fill-height>
<v-row class="align-self-start">
<v-col>I want this to align Top</v-col>
</v-row>
<v-row class="align-self-end">
<v-col>And this to align Bottom</v-col>
</v-row>
</v-container>
How to edit the group-by headers of Vuetify <v-data-table> ?
I need to hide the cross and set a custom title.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
></v-data-table>
You just need to override default group.header slot.
<v-data-table
:headers="headers"
:items="items"
group-by="category"
>
<template v-slot:group.header="{items, isOpen, toggle}">
<td :colspan="headers.length">
<v-icon #click="toggle">
{{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
</v-icon>
<span>Your custom header w/o cross</span>
</td>
</template>
</v-data-table>
Check vuetify docs in Slots category to get full list of available props in this slot.