12220 comments found.
can I use template with vue js ?
Hi,
You can use but you will need to integrate it with Vuejs by yourself since at the moment Metronic does not have official vuejs integration. Our Vue integration will be releaaed in 2-3 months.
Thanks
Hello sir First, the painting is very wonderful, I want to buy it but I do not have enough money. I only have $ 21. Can you deduct me, please? Greetings
Hi,
How to call quick panel using a function ? I want to show it after data load. I tried this:
$(’#kt_quick_panel’).mOffcanvas().show();
and I have this error: Error in v-on handler: “TypeError: $(...).mOffcanvas is not a function”
Hi 
You can also check our video tutorials that shows the best practices using Metronic for real projects:
1. Installation & Getting Started: https://youtu.be/dqZLWuAEdJ8 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM
For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
Thanks
Hello,
Thanks for reply !
Still not working
. I tried on clear Metronic Classic downloaded today and I have still this error:
Uncaught TypeError: $(...).KTOffcanvas is not a function
Hi 
Did you try to run from the downloaded zip?
Thanks
Hello!
I downloaded the latest version of metronic and tried to use this function on classic version of Metronic. I tried also to run this function in defer more but this didn’t work.
Hi 
Sorry, in the latest version, KTOffcanvas is not a jQuery plugin anymore. You have to initialize it using the KTOffcanvas class. Eg.
var headerMenuOffcanvas = new KTOffcanvas(id, options)For more info, please check this link
https://keenthemes.com/metronic/?page=docs§ion=offcanvas
Let us know if you need further clarifications.
Thanks
Do you have a page that showing helper classes like padding, icon size, etc?
Hi
,
For more info you can check the source sass helper file: src\assets\sass\theme\core\base\_helpers.scss
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned
Regards, Sean
Hello Keenthemes,
I have some problem about ChangeDetectorRef. my issue is ChangeDetectorRef is not check or detected directory change. ChangeDetectorRef in my project is only check or detected some change when already compiled in my project. so if there have a new file or image include in folder or assets for the first time ChangeDetectorRef can’t run or can’t work.
Thank.
i think the ng—serve not detecting file changes, so the ng—serve not re-compile
Hi 
Can you use detectChanges() function for the ChangeDetectorRef to detect any changes?
Thanks
Hello PixelDots,
Thank for your reply, but i already try use detectChanges() function for the ChangeDetectorRef. i think my issue is when i upload some file to assets folder the angular can’t re-compile so in the dist folder, the file that I uploaded earlier is not in the dist folder so the files on assets don’t appear on my project. i must to set compile automatic when new file is uploaded in the assets folder. but i dont know how to create that setup. Or i just re-download the metronic file? because i haven’t downloaded the latest metronic
Thank.
Hi 
Did you run this using “ng serve” or in production build? Using “ng serve” in development, by right it does not build the dist folder. Can you please check your uploaded file location should be moved to Angular assets folder /theme/angular/dist/default/src/assets. Angular does not need to recompile the assets inside assets folder. Because its a public folder, which you can access, eg. https://localhost:4200/upload.jpg
Please check this upload tutorial in Angular. https://www.youtube.com/watch?v=YkvqLNcJz3YThanks
Hello PixelDots,
i run by “ng serve” but at the first time to development angular i run “ng build—prod—aot=false—buildOptimizer=false” then i run “ng serve”. i already set the folder image in assets folder like in my screen shoot https://i.imgur.com/8QXe2Jn.jpg
Thank.
Hi webbymandala,
“ng serve” and “ng build” are different instance. You can’t use both. “ng serve” is for development.
And the “ng build” is for production, which the compiler will generate the JavaScript executable code files in dist folder for deployment.
Thanks
Hello PixelDots,
so “ng serve” and “ng build” can’t be run together, can you give me example access if use ng build? because i still don’t know to use access project by “ng build”. And thank for your reply i can fix my issue.
Thank.
Hi 
And we use “ng serve” during development process. Let us know if you need further clarifications.
Thanks
I just noticed a flora of additional layout builder options on DEMO1 that I also partly expected to see on DEMO12 as the reborn version… do the tweaks also work on that demo technically or are they likely not working? In case not, will they be done for the reborn version as well?
E.g. I could need the off canvas search, on DEMO12 that DEMO 1 has.
Looks almost like the original (D1) is the reborned reborn
just add one more subheader option, topbar bg color swap, the user style, and the alternative menu style of D12 which I also prefer and D12 would be obsolete.
Hi
,
Please note that Demo12 reuses all the Demo1 features. In the layout builder you should be able to find them. If you still need a clarification please let us know.
Thanks.
Hmm, I don’t see TOPBAR in the Demo 12 Layout Builder unless there’s something wrong on my side… that allows each element to be turned off/on and most importantly offers dropdown/offvanvas layout options. Plus the “Header > Header Search Layout” option is not there.
Thanks for the feedback. We will check it and fix if required in the next update soon.
Hi,
I m using your Basic Checkbox from “crud/forms/controls/checkbox.html”. I m updating checkbox programmatically with ”.attr(‘checked’, true / false)” and its working good. But if I click the checkbox manualy its stop programmatically working. When I checked on console its not updating after click. Can you help me where is problem?
Hi again
I used prop() instead attr() and tis fixed. Do you have any idea? Is this a problem or was I doing it wrong using attr()? Is it better to use prop() instead of attr() elsewhere?
Hi
,
To change the radio/checkbox states better to use prob() function. This is known limitation of jQuery.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned
Thanks.
ok thanks 
file ‘src/assets/vendors/global/vendors.bundle.js’ not found when run using angular
Hi,
Can you follow the Angular quick steps https://keenthemes.com/metronic/?page=docs§ion=angular-quick-startYou will need to compile and generate the theme’s core assets separately as explained in the documentation.
Regards, Sean
okok.. thanks very much;)
You are most welcome 
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned
Vue Js version?
Hi
,
We are working on it now and it should be out in a few months.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/Stay tuned
Thanks.
Hello, is there a possibility of developing a scrumboard-style screen?
Hi
,
Thanks for your suggestion.
We will consider adding this features in a future release.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
Hi,
I m using v6.0.4. I open the user update form in a Modal and there is a switch in form. After extracting the data with Ajax, I update the form fields and open the modal. at the first opening of the modal, switch is updated as data but it is not visually updated. If I close modal and on re open again, it updating visually too. I m using ”$(’#myModal’).bootstrapSwitch(‘state’, true).trigger(‘change’);” for update the switch. by the way if I use this code in ”$(’#myModal’).on(‘shows.bs.modal’, function () { });” its working but its changing after shown. I want change switch before modal shown. How can I do it?
Hi,
Upon populating a new HTML code with bootstrap switch raw element you should call bootstrapSwitch initializer function in order to initialize the newly populated element. You can check the plugin’s documentation for any further info.
Regards, Sean
I guess I couldn’t explain the problem.
This is initializer => $(‘[data-toggle=”switch”]’).bootstrapSwitch();
its running on my master page for all web site and switch creating visualy. I set switch value is true, but first open of modal its visualy stands at false. My eyes see false but when I get the value to console, its true. After modal close and reopen this is fixing and what I set I see it. this is why?
Hi,
Seems this is the plugin’s original bug when the element is hidden during initialization. As a workaround before opening the modal you can try to initialize the bootstrapSwitch instanced in the modal.
Regards, Sean
What license is the metronic theme covering for the flaticons?
https://www.flaticon.com/ the link has so many icons, which ones are they included?Hi
,
Thanks for your feedback on this.
We use premium licensing(unlimited use without attribution) that covers all iconsets.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
Thanks for your response Sean.
Does that mean I can use any of the icons in the website www.flaticon.com? If yes, how can I get access to that website?
Hi,
Buyers can not access to that site. We meant that you can use the ones included in the theme. If you need custom icons from flaticon.com you can register and pay for the premium membership and download your iconset as webfont icons and you can use it with Metronic by including your iconset same as we included existing iconsets.
Regards, Sean
Hello,
you said that React will be available in Q2 2019, so what is a status?
Hi,
Currently it is in the final testing stage and we will be releasing it soon.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
ETA for React?
Hi
,
It’s coming in in a few weeks. Stay tuned!
Regards, Sean
I am getting this error after I run default theme of angular Error: ENOENT: no such file or directory, open ’/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/src/assets/vendors/global/vendors.bundle.js’ at Object.openSync (fs.js:443:3) at Object.readFileSync (fs.js:348:35) at Storage.provideSync (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:98:13) at CachedInputFileSystem.readFileSync (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:259:32) at Observable.rxjs_1.Observable.obs [as _subscribe] (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/src/webpack-input-host.js:35:51) at Observable._trySubscribe (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:44:25) at Observable.subscribe (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/node_modules/rxjs/internal/Observable.js:30:22) at SyncDelegateHost._doSyncCall (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:22:20) at SyncDelegateHost.read (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/node_modules/@angular-devkit/core/src/virtual-fs/host/sync.js:49:21) at WebpackCompilerHost.readFileBuffer (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/src/compiler_host.js:129:44) at VirtualFileSystemDecorator.readFile (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@ngtools/webpack/src/virtual_file_system_decorator.js:42:54) at Promise (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/scripts-webpack-plugin.js:69:49) at new Promise (<anonymous>) at scripts.map.fullPath (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/scripts-webpack-plugin.js:68:24) at Array.map (<anonymous>) at hook (/home/rahul/Desktop/architecture/themeforest/themeforest-4021469-metronic-responsive-admin-dashboard-template/metronic_v6.0.4/theme/angular/dist/default/node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/scripts-webpack-plugin.js:67:43)
Hi 
Thanks
We have developed a number of applications using Metronic 4. Is it possible to simply upgrade/replace bootstrap 3 with bootstrap 4, in order to use the new grid system?
Hi,
Bootstrap 4 is quite different than Bootstrap 3 also Metronic v6.x has changed a lot since Metronic v5.x so you will need to completely reintegrate your apps. For more info please check https://keenthemes.com/metronic/?page=docs§ion=migration and https://keenthemes.com/metronic/?page=docs§ion=updatePlease follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Thanks.
I’m disappointed because the vue version is come after react version in 2-3 month later
I hope u able to release it together. I have postpone my project just because waiting for vue version.
Hi,
No worries, we will release Vue version as well. But as we said, we just started Vue version and we will release it when it’s done and ready for production. I hope for your understanding.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Thanks.
How to include the calendar component
I checked this url: https://keenthemes.com/metronic/preview/demo1/components/calendar/basic.html
But how do I use this in my angular 8 template?
Hi,
Please check the fullcalendar’s documentation https://fullcalendar.io/docs for further information regarding Angular usage.
Regards, Sean
Thanks for your response looking into it! Maybe you could share the styling you did on the example?
And what about the breadcrumbs I activated sub-header-v3 but in the subheader.service.js it returns me an empty array of breadcrumbs.
Do I need to change something in routing?
Hi,
The styling is included in the theme’s bundle css file. So you just need to include the fullcalendar css/js files and handle the JS part in your Angular code.
After switching to subheader-v3 you will need to code it further according to your requirements.
Regards, Sean
Again thanks for your reply, so the subheader.service.js is not working at this moment?
Could you maybe show an example of how its done like the example link I sent with.
Hi,
The breadcrumb function is located in the SubheaderService;/theme/angular/dist/default/src/app/core/_base/layout/services/subheader.service.tsBy default breadcrumb will read the config, based on the routing it will show the breadcrumb title;
/theme/angular/dist/default/src/app/core/_config/demo1/page.config.ts
Or you can manually, set the breadcrumb for the page inside component onAfterViewInit() function using SubheaderService.
constructor(private subheaderService: SubheaderService) {
}
this.subheaderService.setTitle('Edit user');
this.subheaderService.setBreadcrumbs([
{ title: 'User Management', page: `user-management` },
{ title: 'Users', page: `user-management/users` },
{ title: 'Edit user', page: `user-management/users/edit`, queryParams: { id: this.user.id } }
]);
Thanks
Thank you very much for you reply! By default it does not show any titles of the config file.
This is my page.config.ts
https://drive.google.com/open?id=1m4CPS5m0JrlTstnguKlAIbY1tYl53LFeIt would be nice if the config titles are shown
And I did try setting the breadcrumbs in ngAfterViewInit, than navigate to usermanagement this is the url:
http://localhost:4200/template/user-management/usersSo I expect to see User Management – Users as breadcrumbs right? Only User Management shows up.
Hope you could help me out on this one 
Hi 
Can you make your page config like this? Your routing “template/user-management/users” will read this config as breadcrumbs.
template:{
'user-management': {
users: {
page: {title: 'Users', desc: ''}
},
},
},
Thanks
Yes now it is working thank you very much where can I change the prefix of template in the routing?
Hi 
What do you mean by prefix? Do you mean the demo name? (demo1, demo2, etc)
Please refer to this docs; https://keenthemes.com/metronic/?page=docs§ion=angular-how-set-demoThanks
When you are going to public the Vue version? Waiting so much 
Hi
,
Thanks for your feedback. We are just completed the React version and preparing it for release. Next will be Vue and probably we will release it in 2-3 months.
Please follow us at http://twitter.com/keenthemes to stay updated and check out our video tuts channel on Youtube https://www.youtube.com/c/KeenThemesTuts/videos
Regards, Sean
Hi, I just purchased this template but I cant find the custom pages (login), can you help me?
Hi,
Have you built the theme by installing the build tools and running the gulp task ? If haven’t done yet so please refer to the below video tutorials:
1. Installation & Getting Started: https://youtu.be/dqZLWuAEdJ8 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM For any further info you can also check our detailed theme documentation: https://keenthemes.com/metronic/?page=docs
Please follow us at http://twitter.com/keenthemes to stay updated.
If you need any further help please contact our support at support@keenthemes.com
Thanks.
what can we do or use your theme for?
Hi
,
Thanks for your interest in Metronic.
Metronic is a solid foundation for any project requiring admin dashboard. You can use Metronic to build any type of web applications that requires advanced design and user interface.
For more info please check some related blog posts: https://keenthemes.com/our-take-at-user-interfaces-ui-and-user-experiences-ux/ https://keenthemes.com/admin-themes-save-millions-when-building-a-site-or-web-app/If you need any further clarification please let us know.
Regards, Sean