I have a vuetify v-data-table widget that displays data. Currently the data shown uses too much space (rows have a lot of padding) so I use the dense prop. I add the property dense (like that, not dense='true') to the table opening tag but nothing happens. The display stays wide and the property is ignored.
Tried to remove all props except the items prop:
<v-data-table
dense
:items="results"
>
makes no difference. dense is ignored.
I currently have this:
<v-flex xs12>
<v-data-table
dense
:headers="headers"
:items="results"
:disable-initial-sort="true"
:pagination.sync="pagination"
class="elevation-1 results-table"
#update:pagination="updatePagination($event)"
/>
>
I had the same issue with dense property not working for v-data-table.
In my case it was the v-checkbox added to v-data-table that was causing the dense prop not to work. When using checkboxes inside v-data-table use v-simple-checkbox as explained here: https://vuetifyjs.com/en/components/data-tables/#simple-checkbox
ok, the 'elevated-1' class was overwitten causing the dense prop also to have no effect... /:
Related
I started to use vuetify 3 beta, I know it is not stable according to the documentation but I still tried.
<v-text-field placeholder="Type a name" class="v-field__outlined" outlined></v-text-field>
End result is the basic vuetify text field.
How do I fix this, any help is appreciated!
The styles are no longer individual prop values.
Styling options are now set via a prop called variant
variant="outlined"
It is also no longer possible to mix the different styles and rounded appears to be missing so far.
https://next.vuetifyjs.com/en/components/text-fields/#variant
I want to use in line editing option in Vuetify Datatable component instead of opening a dialog box for editing.
Is there a way to use contenteditable attribute in element in vuetify Datatable component.
According to MDN https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/contentEditable you can apply contenteditable attribute to any HTMLElement.
Try adding the attribute to the element you want to edit.
eg
<div contenteditable="true"></div>
Vuetify has an inbuild content editable mode.
DOCS
The idea is that in every slot you add a v-edit-dialog and v-text-field and then sync the data using v-model and return-value.sync
Instead of using contenteditable attribute, I used the following code and worked perfectly (editable without opening a dialog box and save to bind variable)
<template v-slot:item.name="props">
<v-text-field v-model="props.item.name"> </v-text-field>
</template>
Previously (I thought?) it was possible to put HTML into vuetify hints but for me this is no longer working. For example, in one of my components I have:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
/>
This hint used to display in red but now I see the full HTML code. Has something changed or am I doing something wrong?
In the Vuetify forum, MajesticPotatoe pointed me towards the bug report https://github.com/vuetifyjs/vuetify/issues/9647. This gave the following slots workaround, which works in my code:
<v-checkbox
v-model="create"
label="Nice label"
persistent-hint
hint="<span class="red--text">Red hint</span>"
>
<template v-slot:message="{ message, key }">
<span v-html="message"></span>
</template>
</v-checkbox>
It seems that this used to work without slots before the patch https://github.com/haggys22/vuetify/commit/f0d5edd7ddf7e01ba057b7f3d14604199b6db68d was merged.
behaviour changed from 1.5.19 to 1.5.20
1.5.19 (and before) treats html tags as expected
1.5.20, 1.5.21 treat html tags as simple text
'hint' is the 'string' type so you can't add HTML tags. Here is the screenshot from documentation: https://prnt.sc/qlag61
So, I think you can apply red color from CSS / SCSS using this class name '.v-messages__message' if you really need red color in hint.
Vuetify has some nice built-in transitions. But how can I call a method when the default dialog scale animation has finished?
https://codepen.io/anon/pen/qKNNLw
<v-dialog v-model="dialog" persistent max-width="200">
<v-btn slot="activator">Open</v-btn>
<v-card>
<v-card-text>Thank you!</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click.native="dialog = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
Vuejs describes some Javascript callbacks here: https://v2.vuejs.org/v2/guide/transitions.html#JavaScript-Hooks
Is it possible to use them somehow?
My first idea was to set the dialog transition attribute to false and wrap it with a custom transition but this does not seem to work (disabling transition works but adding my own did not), maybe due to the underlying structure generated by Vuetify.
Background: I render a Google map inside the dialog that needs to resize after reaching full size.
This issue is being treated in v1.2.x milestone of Vuetify :
Heres the issue
You may consider recreating the modal wrapping it with the proper vuejs hooks as well.
I am using a vaadin-grid in a Polymer 2.0 application with several columns that almost all have a vaadin-grid-sorter. Since I would like to give the user a chance to persist its sorting preferences my question is:
Can I set the column to sort by and the sort direction in code?
I had a short look at the grid source code but didn't find any (public) property for that.
I think there is a direction attribute for vaadin-grid-sorter, you can set the value to asc or desc. And set the path attribute for the property in the item used for sorting. For example:
<vaadin-grid-column>
<template class="header">
<vaadin-grid-sorter path="date" direction="desc">Date</vaadin-grid-sorter>
</template>
<template>[[item.date]]</template>
</vaadin-grid-column>