12208 comments found.
Hello ! I think profile frame are missing in the Figma file. Could you add it ? or Could you send me ?
Hi,
Thanks for the feedback, Noted, we will check it as soon as possible. Please note that Figma file is provided as a bonus so it may contain limited pages only.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Does this have the angular too as described
Hi 
,
Yes, you can see all available version demos here https://keenthemes.com/metronic/ and they will be included in the purchase package as well.
For more info please check the theme documentation: https://keenthemes.com/metronic/?page=docs and our video tutorials https://keenthemes.com/metronic/?page=video.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Hello,
Can you guys give me an ETA on the FullCalendar v5 integration? And also, will I be able to upgrade for free with my current license?
Thanks
Hi ,
We are preparing Metronic v8.0.0 for early April and Fullcalendar 5 will be released with Metronic v8.0.1 and Metronic v8.0.2.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Sorry but I bought this because it said there is also just HTML.. but now there are over 1GB but NO html templates… and what ever I do to try to follow your documention I always run into error 
I would like to get a refund because I need just an html template and no program to install…
Hi ,
First of all thanks for choosing Metronic.
There is HTML version included in Metronic theme zip folder.
In order to launch Metronic you will need to install the build tools and run the build task to generate the assets files from the “src” folder.
Nowadays using the build tools to manage the assets is de facto approach. Metronic’s default package includes all the features bundled and using the build tools you may easily customize the styles and also build your custom bundle with required features only to make the output css/js bundle file size minimal.
We encourage our users to move forward with the development trends and from our side we can help with video tutorials, documentations and easy to follow guides.
Please note that the build tools are required only in your development environment just to compile the changes and generate the assets and in your hosting you just need to deploy the assets folder, no need to install those build tools in your hosting.
You can follow https://www.youtube.com/watch?v=NDlQ09mmvu8&ab_channel=KeenThemes or https://keenthemes.com/metronic/?page=docs§ion=html-build-tools and install the build tools and generate the assets by your own in a few minutes.
If you need any further clarifications please contact our support at support@keenthemes.com
Regards, Sean
Hello. I’m using modal including form. If you start to complete some fields and close the modal (without validation) and reopen it you can see your previous data you filled in. How I can empty the form’s fields of the modal when I close it ? Thank you.
Hi ,
You can use Bootstrap Modal close event handler API to perform your require tasks https://getbootstrap.com/docs/4.6/components/modal/#events using jQuery.
I hope the above direction will be helpful for you.
For more info please check the theme documentation: https://keenthemes.com/metronic/?page=docs and our video tutorials https://keenthemes.com/metronic/?page=video.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Hello Sean. Thanks for you help and your support. Regards, David
I’m trying to setup Metronic Vue and Laravel integration When I get to step “npm run dev”, I get the errors. below is from the error log. Please help.
0 info it worked if it ends with ok 1 verbose cli [ 1 verbose cli ’/home/base/.nvm/versions/node/v14.16.0/bin/node’, 1 verbose cli ’/home/base/.nvm/versions/node/v14.16.0/bin/npm’, 1 verbose cli ‘run’, 1 verbose cli ‘dev’ 1 verbose cli ] 2 info using npm@6.14.11 3 info using node@v14.16.0 4 verbose run-script [ ‘predev’, ‘dev’, ‘postdev’ ] 5 info lifecycle metronic-vue-demo1@7.2.2predev: metronic-vue-demo1@7.2.2 6 info lifecycle metronic-vue-demo1@7.2.2dev: metronic-vue-demo1@7.2.2 7 verbose lifecycle metronic-vue-demo1@7.2.2dev: unsafe-perm in lifecycle true 8 verbose lifecycle metronic-vue-demo1@7.2.2dev: PATH: /home/base/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/base/alpha.base.com/node_modules/.bin:/home/base/.nvm/versions/node/v14.16.0/bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/cpanel/3rdparty/lib/path-bin:/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin:/opt/cpanel/composer/bin:/root/bin:/opt/cpanel/composer/bin 9 verbose lifecycle metronic-vue-demo1@7.2.2dev: CWD: /home/base/alpha.base.com 10 silly lifecycle metronic-vue-demo1@7.2.2dev: Args: [ ‘-c’, ‘npm run development’ ] 11 silly lifecycle metronic-vue-demo1@7.2.2dev: Returned: code: 1 signal: null 12 info lifecycle metronic-vue-demo1@7.2.2dev: Failed to exec dev script 13 verbose stack Error: metronic-vue-demo1@7.2.2 dev: `npm run development` 13 verbose stack Exit status 1 13 verbose stack at EventEmitter.<anonymous> (/home/base/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16) 13 verbose stack at EventEmitter.emit (events.js:315:20) 13 verbose stack at ChildProcess.<anonymous> (/home/base/.nvm/versions/node/v14.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14) 13 verbose stack at ChildProcess.emit (events.js:315:20) 13 verbose stack at maybeClose (internal/child_process.js:1048:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5) 14 verbose pkgid metronic-vue-demo1@7.2.2 15 verbose cwd /home/base/alpha.base.com 16 verbose Linux 3.10.0-1160.11.1.el7.x86_64 17 verbose argv ”/home/base/.nvm/versions/node/v14.16.0/bin/node” ”/home/base/.nvm/versions/node/v14.16.0/bin/npm” “run” “dev” 18 verbose node v14.16.0 19 verbose npm v6.14.11 20 error code ELIFECYCLE 21 error errno 1 22 error metronic-vue-demo1@7.2.2 dev: `npm run development` 22 error Exit status 1 23 error Failed at the metronic-vue-demo1@7.2.2 dev script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 1, true ]
Hi,
Have you folllowed our Metronic and Laravel integration tutorial? https://keenthemes.com/metronic/?page=docs§ion=vue-laravel-integrationThank you!
Yes, When I get to step “npm run dev”, I get the errors
This is the error that I get in terminal.
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. – configuration.optimization.splitChunks.cacheGroups[‘styles-public/css/app’] has an unknown property ‘type’. These properties are valid: object { automaticNameDelimiter?, automaticNameMaxLength?, automaticNamePrefix?, chunks?, enforce?, enforceSizeThreshold?, filename?, maxAsyncRequests?, maxInitialRequests?, maxSize?, minChunks?, minSize?, name?, priority?, reuseExistingChunk?, test? } – configuration.stats has an unknown property ‘preset’. These properties are valid: object { all?, assets?, assetsSort?, builtAt?, cached?, cachedAssets?, children?, chunkGroups?, chunkModules?, chunkOrigins?, chunks?, chunksSort?, colors?, context?, depth?, entrypoints?, env?, errorDetails?, errors?, exclude?, excludeAssets?, excludeModules?, hash?, logging?, loggingDebug?, loggingTrace?, maxModules?, moduleAssets?, moduleTrace?, modules?, modulesSort?, nestedModules?, optimizationBailout?, outputPath?, performance?, providedExports?, publicPath?, reasons?, source?, timings?, usedExports?, version?, warnings?, warningsFilter? }
package file
{ “name”: “metronic-vue-demo1”, “version”: “7.2.2”, “private”: true, “scripts”: { “dev”: “npm run development”, “development”: “mix”, “watch”: “mix watch”, “watch-poll”: “mix watch——watch-options-poll=1000”, “hot”: “mix watch—hot”, “prod”: “npm run production”, “production”: “mix—production”, “serve”: “vue-cli-service serve”, “build”: “vue-cli-service build”, “lint”: “vue-cli-service lint”, “rtl”: “webpack—config webpack-rtl.config.js” }, “dependencies”: { ”@babel/polyfill”: “7.4.4”, ”@fortawesome/fontawesome-free”: “5.13.0”, ”@mdi/font”: “3.6.95”, ”@popperjs/core”: “2.9.0”, ”@riophae/vue-treeselect”: “0.4.0”, “animate.css”: “4.1.0”, “apexcharts”: “3.19.0”, “axios-mock-adapter”: “1.18.1”, “bootstrap”: “4.5.0”, “bootstrap-vue”: “2.13.0”, “clipboard”: “2.0.6”, “core-js”: “3.6.5”, “deepmerge”: “4.2.2”, “highlight.js”: “9.18.1”, “line-awesome”: “1.3.0”, “object-path”: “0.11.4”, “perfect-scrollbar”: “1.5.0”, “portal-vue”: “2.1.7”, “roboto-fontface”: ”*”, “socicon”: “3.0.5”, “sweetalert2”: “9.10.12”, “tooltip.js”: “1.3.2”, “vue”: “2.6.12”, “vue-apexcharts”: “1.5.3”, “vue-axios”: “2.1.4”, “vue-cropperjs”: “4.1.0”, “vue-highlight.js”: “3.1.0”, “vue-i18n”: “8.17.4”, “vue-inline-svg”: “1.3.0”, “vue-router”: “3.1.5”, “vue2-perfect-scrollbar”: “1.5.0”, “vuelidate”: “0.7.5”, “vuetify”: “2.2.26”, “vuex”: “3.3.0” }, “devDependencies”: { ”@vue/cli-plugin-babel”: “4.5.9”, ”@vue/cli-plugin-eslint”: “4.5.9”, ”@vue/cli-service”: “4.5.9”, ”@vue/eslint-config-prettier”: “4.0.1”, “axios”: “0.21.1”, “babel-eslint”: “10.0.3”, “cross-env”: “7.0”, “eslint”: “5.16.0”, “eslint-plugin-prettier”: “3.1.3”, “eslint-plugin-vue”: “5.0.0”, “laravel-mix”: “6.0.6”, “lodash”: “4.17.19”, “postcss”: “8.1.14”, “sass”: “1.29.0”, “sass-loader”: “8.0.2”, “vue-cli-plugin-vuetify”: “2.2.2”, “vue-loader”: “15.9.6”, “vue-template-compiler”: “2.6.12”, “vuetify-loader”: “1.3.0”, “webpack-cli”: “3.3.11”, “webpack-messages”: “2.0.4”, “webpack-rtl-plugin”: “^2.0.0” }, “eslintConfig”: { “root”: true, “env”: { “node”: true }, “extends”: [ “plugin:vue/essential”, “eslint:recommended” ], “rules”: [], “parserOptions”: { “parser”: “babel-eslint” } }, “browserslist”: [ ”> 1%”, “last 2 versions”, “not ie <= 10” ] }
Hi,
Are you using this package.json for your vue+laravel app?
You do not need to modify anything just copy all needed dependencies from the vue version.
Regards, Lauris
I am using the package.json for vue+laravel app and am hitting errors when I run npm run dev. Can we get on a screen sharing session to help me with the setup.
Hi,
Please make sure that you have made all steps correctly: https://keenthemes.com/metronic/?page=docs§ion=vue-laravel-integration Sorry here our support is limited, we are not providing support through screen sharing, only ThemeForest comments and our support email: support@keenthemes.com, please check support policy: https://keenthemes.com/faqs#supportRegards, Lauris
Hello. Thank you for your job and this very convenient framework. I’d like to use the modal in a php page in order to modify some information in a big list. I don’t want to create a modal for each record of the list, but use an unique modal with data. Is there a way to integrate data into the modal button in order to use them in a unique modal ? Thank you for your help
Hi,
You should use Bootstrap Modal API methods to handle such requirement. For more info please check https://www.codexworld.com/bootstrap-modal-dynamic-content-jquery-ajax-php-mysql/ and https://getbootstrap.com/docs/4.6/components/modal/
Regards, Sean
Hello. Thank you for the links. It works very well.
You are most welcome
Hello there,
I’ve seen you have been asked before. I have been checking it many times every day for about a month. I want to get information about Bootstrap 5 update. I plan to open the project I have been working on for more than 3 months after the update. In particular, I would like to listen to the components that will not be used after the update and what you plan to add.
Thanks. Good job.
Hi ,
Thanks for dropping a line.
Most of the plugins compatible with Bootstrap 4 yet not ready for Bootstrap 5 so we are trying to find some alternative or code by our own so due to this, in order to make Metronic 8 production ready we are needing more time. Probably by end of this month or early April we will release it.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Hello, we use now the latest version and we miss in the demo3 folder the assets folder. Any idea how i can find it?
<link href=”assets/css/pages/login/login-1.css” rel=”stylesheet” type=”text/css” />
<!-end::Page Custom Styles->
<!-begin::Global Theme Styles(used by all pages)->
<link href=”assets/plugins/global/plugins.bundle.css” rel=”stylesheet” type=”text/css” />
<link href=”assets/plugins/custom/prismjs/prismjs.bundle.css” rel=”stylesheet” type=”text/css” />
<link href=”assets/css/style.bundle.css” rel=”stylesheet” type=”text/css” />
Hi,
First of all thanks for choosing Metronic.
In order to launch Metronic you will need to install the build tools and run the build task to generate the assets files from the “src” folder.
Nowadays using the build tools to manage the assets is de facto approach. Metronic’s default package includes all the features bundled and using the build tools you may easily customize the styles and also build your custom bundle with required features only to make the output css/js bundle file size minimal.
We encourage our users to move forward with the development trends and from our side we can help with video tutorials, documentations and easy to follow guides.
Please note that the build tools are required only in your development environment just to compile the changes and generate the assets and in your hosting you just need to deploy the assets folder, no need to install those build tools in your hosting.
You can follow https://www.youtube.com/watch?v=NDlQ09mmvu8&ab_channel=KeenThemes or https://keenthemes.com/metronic/?page=docs§ion=html-build-tools and install the build tools and generate the assets by your own in a few minutes.
If you need any further clarifications please contact our support at support@keenthemes.com
Regards, Sean
Hello, are all Figma files included for the dashboards? We would like our designers to edit some views.
Hi ,
Thanks for your interest in Metronic. Yes, the Figma file will be provided as a bonus for layout and dashboard widgets, some general inner pages.
Regards, Sean
Hi, I’m using HTML version and I love this theme. Despite that I am having a hard time trying to “activate” menu-item on the aside menu when we click on a specific link option.
Should’t it only be necessary to import the initialize.js file so it can handle this for us? Could you please point me in the right direction?
Thank you very much.
Hi,
Sorry for the late reply.
The menu active states must be handled in server side when you generate the page you can activate required menu link and it’s parents following the Metronic’s menu markup. If you use JS for that users may notice the delay until page fully loads and activates the menu links:
https://imgur.com/fVMBCYKFor more info please contact our support via support@keenthemescom
Regards, Sean
Hello, are you guys updating laravel version to laravel mix 6?
Hi,
Yes, we will update laravel mix version in upcoming updates.
Thank you!
Hi, I need some help with integrating a custom layout that I’ve exported from the Layout Builder. I’ve downloaded the zip file, but I’m not sure how to actually update the layout in my project. I’m using Webpack to build the template.
Hi ,
Can you please check this video tutorial https://www.youtube.com/watch?v=ptgwzvvAHy4&ab_channel=KeenThemes that explains the layout builder usage for real projects.
For any further help please reach our support team via support@keenthemes.com
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
Hi, Is the angular 11 version comes with model federation. we are into micro architecture and both our front and backend are deployed using plugins. so want to know if you are already set for micro architecture or if we need to do it is their any guide/documentation available. thanks
Hi MasterInChief
We don’t have the goal to use Model Federation in our project, cause we are UI Library with examples, and only a few users need MFE or even have expertise on MFE. For the Angular version, we will continue to use the setup from Angular CLI without any modifications to the standard configurations.
Regards, Keenthemes support
thanks for reply, can you answer second half of my question : is their any documentation or small guide that you can provide so we can convert the UI library to MFE ?
No, we don’t have such guide.
Regards, Keenthemes support
Hi, I add Axios to gulp.config.js, but the console keep asking for it’s minimap. Can I include this minimap in gulp config without adding manually? thanks.
oh and one more thing, i try to remove summernote and apexchart from optional and move it into custom. but when I check on my page that using summernote it was mess up although I include the summernote CSS and JS file already. can you help me am I doing it correctly? here’s the configuration I made :
https://pastebin.com/QsJ8R8p6Thanks.
Hi,
Could you please try this config. It will move the sourcemap file to the output folder
"axios-sourcemap": {
"src": {
"media": [
"{$config.path.node_modules}/axios/dist/axios.min.map"
]
},
"output": {
"media": "{$config.dist}/plugins/custom/axios"
}
}
Thanks
For the summer note issue; when you move the summer note to the custom. By right, it will build as a separate bundle file. Have you included it on your summer note page?
"summernote": {
"src": {
"styles": [
"{$config.path.node_modules}/summernote/dist/summernote-bs4.css"
],
"scripts": [
"{$config.path.node_modules}/summernote/dist/summernote-bs4.js"
],
"fonts": [
"{$config.path.node_modules}/summernote/dist/font/**"
]
},
"bundle": {
"styles": "{$config.dist}/plugins/custom/summernote/summernote.bundle.css",
"scripts": "{$config.dist}/plugins/custom/summernote/summernote.bundle.js"
}
},
I include the CSS and JS file like this:
<link href="/assets/plugins/custom/summernote/summernote.bundle.css" rel="stylesheet" type="text/css" />and for JS:
<script src="/assets/plugins/custom/summernote/summernote.bundle.js"></script>
Hi,
Please specify the “summernote.bundle.fonts” as output path as well, similar to “summernote.src.fonts”
Do you include the CSS after other CSS files?
Thanks
Hi, thank for the reply. But can you tell me how can i specify the “summernote.bundle.fonts” as output path? Yes i include the CSS already i put it above plugins.bundle.css and style.bundle.css.
Hi,
I mean like this, you have specify the output path for font as well.
"summernote": {
"src": {
"styles": [
"{$config.path.node_modules}/summernote/dist/summernote-bs4.css"
],
"scripts": [
"{$config.path.node_modules}/summernote/dist/summernote-bs4.js"
],
"fonts": [
"{$config.path.node_modules}/summernote/dist/font/**"
]
},
"bundle": {
"styles": "{$config.dist}/plugins/custom/summernote/summernote.bundle.css",
"scripts": "{$config.dist}/plugins/custom/summernote/summernote.bundle.js",
"fonts": "{$config.dist}/plugins/custom/summernote/dist/font"
}
}
Thanks
Hi, it seem the fonts is not copied to /plugins/custom/summernote/dist/font. it make an error since font can’t be found.
Hi,
The code I sent above should copy the summernote font into plugins/custom/summernote/dist/font
Thanks
I’m not sure what’s wrong, but there’s nothing there. you can take a look at my screenshot there’s no any file:
https://prnt.sc/10ex4i5I check Summernote in node_modules and there’s fonts in there : https://prnt.sc/10ex6cj
Hi,
Right, the fonts not moving from node_modules to the output location using those configs.
We will fix it soon.
Thanks
Only Demo 1 is in Laravel ??
Or are the other demos in Laravel?
Hi,
Yes, the Laravel integration contains only one Demo1 as example and other demos you can integrate by reusing the Demo 1 base code.
For more info please check the theme documentation: https://keenthemes.com/metronic/?page=docs and our video tutorials https://keenthemes.com/metronic/?page=video.
Please follow us at http://twitter.com/keenthemes to stay updated.
Regards, Sean
I’m having an issue with the KTDatatable. The overflow and autoHide options that I set in the columns will not affect the table on Mobile browsers. The Actions column I have is overflowing and overflow is unset. Works fine on desktops. See the screenshot here.
Hi,
For the hidden column, did you set the option to disable autoHide? Please try to remove it, if any.
autoHide: false,Thanks
Hi I have very basic knowledge of HTML & CSS. I am trying to find the basic HTML pages which I can start editing. I am unable to do so, I tried reading the documentation, however it asks me to start a gulp server etc.
Can you help me where I can find the entire templates basic html / css pages?
Hi,
First of all thanks for choosing Metronic.
No worries, you still can use HTML static templates. In order to launch Metronic you will need to install the build tools and run the build task to generate the assets files from the “src” folder.
Nowadays using the build tools to manage the assets is de facto approach. Metronic’s default package includes all the features bundled and using the build tools you may easily customize the styles and also build your custom bundle with required features only to make the output css/js bundle file size minimal.
We encourage our users to move forward with the development trends and from our side we can help with video tutorials, documentations and easy to follow guides.
Please note that the build tools are required only in your development environment just to compile the changes and generate the assets and in your hosting you just need to deploy the assets folder, no need to install those build tools in your hosting.
You can follow https://www.youtube.com/watch?v=NDlQ09mmvu8&ab_channel=KeenThemes or https://keenthemes.com/metronic/?page=docs§ion=html-build-tools and install the build tools and generate the assets by your own in a few minutes.
If you need any further clarifications please contact our support at support@keenthemes.com
Regards, Sean
Dear Dean, G’day.
I’m trying use in my project multiple select2 inside of class=”collapse”. Width of field select2 is broken.Could you advise any solutions, how I can use multiple select2 inside of class=”collapse”. Thank you in advance.
<div class="card">
<div class="card-header" id="headingOption">
<div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOption">Option</div>
</div>
<div id="collapseOption" class="collapse" data-parent="">
<div class="card-body">
<div class="form-group">
<select class="form-control select2" id="kt_select2_3_1" name="param" multiple="multiple">
<option>Select Option...</option>
<option value="1" selected="selected">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
</div>
</div>
</div>
sorry, I mean Sean!
Hi,
Sorry for the late reply. We were checking it and trying to find a workaround. Can you try to add below HTML attribute for your select2 tag ?
data-width="100%"
For more info please check: https://select2.org/
Regards, Sean
Dear Sean, supper solution, thanks.
You are the most welcome All the best with your projects!
By default , it got an error.
./src/_metronic/i18n/Metronici18n.js Line 36:12: ‘displayName’ is not defined no-undef
Hi singleseeker,
Please mail us ‘support@keenthemes.com’, with screenshots of your error, demo number, and version of the application (7.x.x/6.x.x). In that case, we will be able to reproduce your case.
Regards, Keenthemes support
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
