I am using ag-grid in my project which uses vuetify.js and is based on vueJS. I am facing problems with the ag-grid themes. Whenever I use the ag-material theme the outcome is different from the one shown ag-grid website. I just get a very basic theme when I add material theme. Can anyone help?
you need to make sure you import both
import "/node_modules/ag-grid/dist/styles/ag-grid.css";
import "/node_modules/ag-grid/dist/styles/theme-material.css";
and then, make sure you include both classes <ag-grid-vue class="ag-material ag-theme-material">
Related
Long story short, I'm having some serious trouble getting themes to work in general - even for the "HelloWorld" base app that comes preinstalled with Vuetify. For some reason Vue/Vuetify do not apply any colors to anything unless I use the "color=" tag and even when I use "color=" it only uses the color I specify an not any shades or highlights of that color. When I change the theme from "light" to "dark" or vice versa nothing happens (again, I'm having the same issue with the "HelloWorld" app). I feel like I've gone through all the documentation for themes a hundred times and am looking for anyone to point me in the right direction. I should add that for one reason or another the theme IS working on a random v-list-group in the nav drawer but not to the items above or below the group. I'm using Vue 2 and Vuetify 2.
Things I've Tried
Making a new theme using the theme generator on the Vuetify website and inserting it into the ./src/plugins/vuetify.js file as instructed by the documentation.
Attempted inserting the theme at the bottom of ./src/App.vue between the <script> </script> elements. This worked for someone else but didn't do it for me.
Completely uninstalled and reinstalled Vue-CLI using the command line.
Completely deleted and recreated my project.
Remaking my project using Vue 3 and Vuetify 3. This does work but Vuetify 3 does not yet have the components I need for my project.
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
When I test vue-select in POC project, it works well, see screen shot below:
However, when I use vue-select in my real project, it is disordered, see screen below, did any one have similar issue and how to fix it?
after #import "vue-select/src/scss/vue-select.scss";
Thanks
George
You of course realize that no CSS is applied to the markup, so you need to apply some cuatom CSS.
Or, see the Vue Select docs
how to include their default CSS:
The component itself does not include any CSS. You'll need to include it separately:
import 'vue-select/dist/vue-select.css';
Alternatively, you can import the scss for complete control of the component styles:
#import "vue-select/src/scss/vue-select.scss";
I'm using customize-cra as suggested by antd documentation to be able to customize the theme and it works fine.
I can access less variables from antd theme by importing the index in my less files and it works fine.
I can use the old fashioned css modules to style my components by defining files with .module.css and it works fine.
However, I would like to import and use the antd theme less variables in my css modules and I can't figure out how to make it work. Does anybody know how it can be achieved?
I am able to use the variables if I import antd.less at the top of the whatevercomponent.less file:
#import 'antd/dist/antd.less';
I originally had Vuetify working perfectly in my app but somewhere along the way the styles of components broke and I'm not sure how to fix it.
For example, here is my Vuetify table:
Reality:
Expected:
As far as I can tell everything is setup correctly, I will say, I started using SCSS inside the modules but I don't think that is the problem.
The functionality of Vuetify is working like sorting and things like that but just the styles are broken it appears.