I'm using Vuetify (2.6.1) data tables and they work great.
I wonder if it is possible to customize the UI of a particular case:
-> when the v-data-table is in responsive into the mobile breakpoint.
The UI looks like this:
data table list on mobile - sort field highlighted
Is it possible, just in this case, to customize the select highlighted in red here ?
I tried to update the the global CSS but things are not clean because when an item is selected from the list there is a v-chip added:
data table list on mobile with sort selected
I would like the select to look like and behave just like in this case here highlighted in red:
vuetify documentation - select solo style
I searched on the documentation and API, stack overflow, vuetify github's and tried different ways but I haven't found a way on how to properly style the sort select input.
Is anyone have any idea ? Maybe I'm missing something.
Thank you for your help.
You can use the dynamic slots item.<name> and customise v-select or v-autocomplete inside: https://vuetifyjs.com/en/components/data-tables/#item
Related
Hello I am trying to learn vue independently by building a small project.
I want to search for products displayed on the page.
I use vue,vuex and vuetify.
I would love to get an idea of how to do this.
this is link to my project
Thank you
You can use v-autocomplete
v-autocomplete by default is meant to searchable.
Updated codesandbox
No way to customize option in bootstrap-vue select component.
I would like to add padding on top.
i try to modify class "custom-select" and tag option but i hanven't reached the solution.
Unfortunately bootstrap-vue doesn't offer a select form input solution that has a custom dropdown area, if the select is not multiple. More on this: Non custom select
This means that you need some workaround tools that do the job for you, like using a utility library. More information can be found on other Stackoverflow issues, like, this one or this. All of them say that the native select option can be styled only to a very limited degree - unfortunately, setting the padding is not included.
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
I want to create a dynamic bootstrap table that looks something like this:
https://examples.bootstrap-table.com/#welcome.html
Currently I am using this code to display my data from an array in the bootstrap table:
<b-table striped hover :items="shotlist_tab.shots"></b-table>
But I also want to add custom buttons on the side for each row (edit / delete).
Is there a way to customize the columns of a "b-table"? I haven't found anything yet.
You can use slots. You can read here about that.
If you provide some more code I can help you with that.
Also, one good example of using slots and collapse data inside the row.
Good luck!
I'm learning Vue and Vuetify right now. And I want to develop a Calendar tool combining Vuetify with Laravel.
With v-calendar it is possible to render multiple 'event-indicators'
See example
With Vuetify 'one' event indicator is possible (example), but I don't know how to manage to make it two or even three. Is there any solution for this?
Yes we can, just pass an array for all the colors you want to assign on a particular date, using the allowed-dates prop. It has been included in the vuetify examples as well.
Refer: https://vuetifyjs.com/en/components/date-pickers/#date-pickers-events
Yeah had a play around with it but doesn't seem you can get it to display multiple events as it is :( You can submit it as a feature though here and they're usually quite quick to respond if it's possible or not. Sorry I can't help any other way.