12208 comments found.
Dear community, welcome Devs Forum!
We’ve been long wishing to build a bridge between us and the Metronic community. As the ThemeForest comments section only allows limited room for conversation, we kindly invite you to collaborate with Metronic developers from everywhere on Devs Forum.
Click Here to Get Metronic Support
Best regards,
Bob
We need support for RTL version for Angular, we already added RTL style css file.
How to switch between 2 languages English (LTR) and Arabic(RTL) ?
Hi,
Could you please try to add rtl attributes in the HTML tag?
<html direction="rtl" dir="rtl" style="direction: rtl">
As the ThemeForest comments section is meant only for pre-sale questions and general inquiries, we have launched a centralized support forum for Metronic customers. Please create a support ticket using the link below:
Click Here to Get Metronic Support
Thanks
Nice Design
Thank you 
I want to buy this theme but without jQuery dependency.
I have checked and found that you are using Select2.JS which is based on jQuery
However you can use Choices.JS whose functionality is exactly like the Select2.JS but written in javascript
Here is the link of Choices.JS
https://github.com/Choices-js/Choices
I also want to ask you when you will add ReactJs demo for version 8 theme?
Hi,
Thanks for your interest in Metronic.
You can check our documentation to remove jQuery plugins: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/customization/no-jquery.htmlThose jquery plugins are optional and the core of Metronic does not depend on jQuery.
If you require further assistance, please create a ticket using the link below. KeenThemes will help you out.
Click Here to Get Metronic Support
Regards, Sean
hello , i am working on metronic 8 demo 1 angular , ngFor not working properly , i simply put this *ngFor=”let hero of LanguageList”{{hero.name}} in li tag in login component and initialize this by public LanguageList = [ { “id”: 3, “name”: “french” }] and with the of help of settimeout change value code is setTimeout(() => { debugger let a = [ { “id”: 1, “name”: “urdu” }, { “id”: 2, “name”: “english” } ] this.LanguageList.push( { “id”: 1, “name”: “urdu” }, { “id”: 2, “name”: “english” }) console.log(“lang” , this.LanguageList) }, 4000); but this not reflect on my view , in console it update , can you please guide me what the problem , i google it alot but not get the answer
HI,
We used onPush change detection strategy for performance. You can disable this by removing changeDetection: ChangeDetectionStrategy.OnPush.
Or you can use below code to manually update the UI render.
constructor(private cd: ChangeDetectorRef) {}
refresh() {
this.cd.detectChanges();
}
https://www.digitalocean.com/community/tutorials/angular-change-detection-strategy
Thanks
Hi ,
As the ThemeForest comments section is meant only for pre-sale questions and general inquiries, we have launched a centralized support forum for Metronic customers. Please create a support ticket using the link below:
Click Here to Get Metronic Support
Best regards, Sean
It looks like that part needs an update.
ERROR in ./resources/ts/src/Landing.vue?vue&type=style&index=0&id=50c210f4&lang=css (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-10.use1./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-10.use2
./resources/ts/src/Landing.vue?vue&type=style&index=0&id=50c210f4&lang=css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can’t resolve ‘assets/porto/css/theme.css’ in ’/home/www/php/laravel/main/resources/ts/src’
at finishWithoutResolve (/home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:293:18)
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:362:15
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1)
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:27:1)
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:87:43
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5
at eval (eval at create (/home/www/php/laravel/main/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at /home/www/php/laravel/main/node_modules/enhanced-resolve/lib/Resolver.js:410:5
ERROR in ./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13.use1./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-13.use2
./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation “50px * divide(3, 2)”.
╷
33 │ width: $size * divide(3, 2);
│ ^^^^^^^^^^
╵
resources/ts/src/assets/sass/core/components/mixins/_symbol.scss 33:21 symbol-size()
resources/ts/src/assets/sass/core/components/_symbol.scss 63:5 @import
resources/ts/src/assets/sass/core/components/components.scss 68:9 @import
resources/ts/src/assets/sass/style.scss 12:9 @import
resources/ts/src/App.vue 43:9 root stylesheet
webpack compiled with 2 errors
Hi,
As I see you are trying to make vue and laravel integration.
Did you follow our integration doc? https://preview.keenthemes.com/metronic8/vue/docs/#/vue-laravel-integration
Regards,
Lauris
Yes. I followed the workbook guide. The error is:
LOG from ./node_modules/sass-loader/dist/cjs.js sass-loader ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use1./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use2
./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($input-padding-y, 2) or calc($input-padding-y / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules/bootstrap/scss/_variables.scss 720:73 @import
<w> resources/ts/src/assets/sass/_init.scss 18:9 @import
<w> resources/ts/src/assets/sass/plugins.scss 13:9 @import
<w> resources/ts/src/App.vue 42:9 root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($spacer, 2) or calc($spacer / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules/bootstrap/scss/_variables.scss 942:37 @import
<w> resources/ts/src/assets/sass/_init.scss 18:9 @import
<w> resources/ts/src/assets/sass/plugins.scss 13:9 @import
<w> resources/ts/src/App.vue 42:9 root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($nav-link-height – $navbar-brand-height, 2) or calc(($nav-link-height – $navbar-brand-height) / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules/bootstrap/scss/_variables.scss 951:37 @import
<w> resources/ts/src/assets/sass/_init.scss 18:9 @import
<w> resources/ts/src/assets/sass/plugins.scss 13:9 @import
<w> resources/ts/src/App.vue 42:9 root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($spacer, 2) or calc($spacer / 2)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules/bootstrap/scss/_variables.scss 1001:37 @import
<w> resources/ts/src/assets/sass/_init.scss 18:9 @import
<w> resources/ts/src/assets/sass/plugins.scss 13:9 @import
<w> resources/ts/src/App.vue 42:9 root stylesheet
<w>
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w>
<w> Recommendation: math.div($spacer, 4) or calc($spacer / 4)
<w>
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w>
<w> node_modules/bootstrap/scss/_variables.scss 1013:37 @import
<w> resources/ts/src/assets/sass/_init.scss 18:9 @import
<w> resources/ts/src/assets/sass/plugins.scss 13:9 @import
<w> resources/ts/src/App.vue 42:9 root stylesheet
<w>
ERROR in ./resources/ts/src/router/index.ts 31:11-34 Module not found: Error: Can’t resolve ’@/Landing.vue’ in ’/home/www/php/laravel/main/resources/ts/src/router’
ERROR in ./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use1./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use2
./node_modules/vue-loader/dist/index.js??ruleSet0.use0!./resources/ts/src/App.vue?vue&type=style&index=0&id=ccae3304&lang=scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined operation “50px * divide(3, 2)”.
╷
33 │ width: $size * divide(3, 2);
│ ^^^^^^^^^^
╵
resources/ts/src/assets/sass/core/components/mixins/_symbol.scss 33:21 symbol-size()
resources/ts/src/assets/sass/core/components/_symbol.scss 63:5 @import
resources/ts/src/assets/sass/core/components/components.scss 68:9 @import
resources/ts/src/assets/sass/style.scss 12:9 @import
resources/ts/src/App.vue 43:9 root stylesheet
webpack compiled with 2 errors
Is there a way to use sass without migration?
Hi,
By default, we do not have @/Landing.vue component in our theme, if you added it by yourself so please make sure that file is created and imported correctly.
Yes, you can use sass files separately. Just bundle them with webpack and connect to your HTML files.
If you enquire further assistance or have questions, we invite you to join our products community at https://devs.keenthemes.com/. There you can get assistance and guidance from KeenThemes core developers and community members.
Regards,
Lauris
To whom it may concern – it’s an awful experience. The zip file for this theme is 3.7GB. I have 18GB free and the archive can not be extracted. It’s an awful waste of time and resources. It could have been better.
Hi,
Thanks for your feedback. To quickly unpack the package you can use https://www.7-zip.org/ software. You can use only required sub package or demo and remove other parts.
You can also clone the entire package via GitHub. To do so please provide your GitHub username via support@keenthemes.com and we will grant you access.
As our package growing with new demos, apps and components we are planning enable an online download page for Metronic package which allows our buyers to download selected sub package and demo at their convinces.
Regards, Sean
Hello! I want to use demo 8 but with angular 12, to make it 100% functional I must initialize the KTs eg: KTMenu.createInstances (); KTDrawer.createInstances (); KTSticky.createInstances ();
Besides INIT (), what other object should I initialize to make the template 100% functional?
Hi,
Can you please check the Demo 1 Angular implementation from your download package ? The core app structure and initialization are almost same for all demos and the only difference is the HTML partials. After checking the demo 1 Angular if you have any questions please contact our support at support@keenthemes.com
Regards, Sean
Hi Keenthemes,
I recently updated to the latest Metronic8 ver 8.0.33, but the select2 still not render in correctly in RTL layout.
This time I even didn’t use my template, but yours (the one that I donwloaded)
Here’s what I did :
0 – Clear all the browser cache
1 – took a random page that has a select2 : apps/ecommerce/catalog/add-category.html
2 – change the html header to : <html lang="ar" dir="rtl" direction="rtl" style="direction:rtl;">
3 – change the layout to RTL :
<link href="assets/plugins/global/plugins.bundle.rtl.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.bundle.rtl.css" rel="stylesheet" type="text/css" />
4 – hard refresh on the browser : CTRL + SHIFT + RTL
And here the Metronic8 download render the same as my compiling one : https://ibb.co/WGRyv7M
It’s not even a Server Side rendering(Django template), it’s directly on your html.
any ideas ?,
Thank you.
Notices also that upgrading to 8.0.33, made btn-sm little bit bigger than before, wich is little bit annoying.
Hi,
Regarding the btn-sm size, that was due to some design adjustments.We will revise it. In the mean time you can set custom btn-sm in your _variables.custom.scss:
$input-btn-padding-y-sm: .65rem !default; $input-btn-padding-x-sm: .75rem !default;
Regards, Sean
sorry for the buttom comment inside the select2 one, I didn’t know that It went one inside the other.
Sorry Sean
Still waiting for the select2 answer (LoL).
Thank you
Hi riterix,
We have received your select2 in RTL issue report. At the moment, we could not find the solution for it yet. We have to check it further and provide you the fix.
Thanks
Allright Noted.
Thank you PixelDots.
Hi riterix,
Are you able to rebuild the assets? And please try to use the assets from the build.
cd theme/tools yarn gulp --demo1 --rtl --prod
We will find a way to fix the prebuild assets that included in the zip.
Thanks
Yes I did, but it was the same (Not well rendered), and I thought that If I could use just the downloaded HTML (Not going the build route) to see If the issue is in my template and build assets.It appeared that it was the same thing.
thank you.
Hi riterix,
We requires more time to investigate this issue. We will fix it and include the fix with the prebuilt assets in the zip.
Thanks
I understabd (although it was working great in Metronic7, maybe you find your answe there).
Hope it will be fixed in the next Metronic Relese.
thank you
Hi,
Sure, we are working on this now will try to finish it in the next update.
Regards, Sean
how can i download the version 7 of metronic?
Hi ,
Please send us your GitHub username and we will grant you access to the GitHub repo to download previous version.
Regards, Sean
thanks! github user: the-eikros
Hi ,
Here you https://github.com/KeenthemesHub/Metronic.
You can check v7.x version in the tags list.
Regards, Sean
Hi keenthemes,
Is there a way yo have this amazing sticky-toolbar from Metronic7 into Metronic8 ?
Did a lot’s of tries (with navs, vertical tabs, menus, ...) but at the end feels hacky …
Do you consider to integrate it in Metronic8
Since it is usefull specially when you need more than 1 button.
Please…
Thank you.
Forget about it,
I made it : https://ibb.co/pf9TSwB
with (buttons, shadow, rounded stuff, ... )
Sorry. thank you guys 
No probs, Looks great!
Thank’s
Hi, I see Metronic 8 Angular is using Bootstrap 5 and also using ng-bootstrap. But on ng-bootstrap home page, they say that ng-bootstrap is for Bootstrap 4. ng-bootstrap for Bootstrap 5 is still in beta and not included in Metronic 8. Is it OK when using ng-bootstrap for Bootstrap 4 in Bootstrap 5?
Hi,
We are using ng-bootstrap beta with bootstrap 5. Beta version should be OK to use.
Thanks
Hello! where to include AlpineJS in Metronic Laravel 8.0.33 ?
Hi ,
Regard, Sean
<label class=”form-check form-switch form-check-custom form-check-solid”> <input class=”form-check-input” type=”checkbox” value=””/> Without id linking </label>
how can i change the default non active color and active color ( because default color hard to see the input )
Hi,
You can globally change this by overriding the solid check option’s bg color defined in core\html\src\sass\components\_variables.scss
$form-check-input-bg-solid: $gray-200 !default; // Custom variableYou can try to use darken gray option:
$form-check-input-bg-solid: $gray-300 !default; // Custom variable
Then recompile your assets folder with updated “src” folder.
For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html
Regards, Sean, Keenthemes Inc.
can i change by add the class? like example bg-info bg-danger or some coding like this ?
Hi,
You can use the standard bootstrap color classes as shown below:
class="form-check-input h-30px w-30px bg-info"
Regards, Sean
Hi, When I try to implement Modal it will give “Illegal invocation” error. How to fix it. Thanks
Hi,
May I know which Metronic version are you using ? This issue is related to modal attributes usage. Please have a look https://stackoverflow.com/questions/65326991/2-different-modals-on-the-same-page-throws-error or let us know if you need any further help
Regards, Sean
HI,Is there a Metronic 8 vue version in github? Can you join me? My github account: riancy7
Vue 8.0.32 cannot run, please check
Hi,
We have sent the invitation to our github. We will check the vue
Thanks
Using Npm will fail, yran is normal
Hi,
Could you please send the screenshot of the error when you install using npm?
Thanks
Is the Laravel version not included in the download anymore?
Hi,
Sorry for the inconvenience. We have an update today. We will include the laravel in the update by today.
Thanks
Hello there I can’t find Laravel in https://github.com/KeenthemesHub/Metronic
Hi ,
Thanks for your feedback. We will push it shortly.
Regards, Sean
Than you for the fast answer Sean.. any updates on implementing ktdatatables(server side) for laravel version (demo1) ??
Hi,
In Metronic 8 KTDatatables component is dropped and we will be used Datatables.net for Laravel CRUD solutions. Currently we have server side datatable feature with real data model: https://preview.keenthemes.com/metronic8/laravel/log/audit?demo=demo1Regards, Sean
Hi,
It seems that the Language switcher in the User menu on React demo2 is not working and I can’t seem to find the issue. Can you suggest a fix for this?
Thank you
Hi,
The issue was caused by @popper v2.11.0 plugin update. You can use the last stable version for Metronic in package.json
”@popperjs/core”: “2.10.1”, And remove node_modules and yarn.lock files from the tools folder and rerun yarn.
We will release the official fix shortly.
Regards, Sean
Fantastic. Thank you Sean
Sure thing, you we welcome!
Hello,
Is there a YES/NO confirmation possible for the popovers included? ( https://preview.keenthemes.com/metronic8/demo2/documentation/base/popovers.html )
When I install an extra plugin like jquery.popconfirm.js it looks good but I don’t see the Yes/No buttons, it just goes.
Hi ,
Thanks for your interest in Metronic.
We added your request into our todo list and we will release this featire in a future update soon.
Regards, Sean
Super! Thanks!
You are welcome
This item was featured on ThemeForest
Power Elite Author
Contact the Envato Market Help Team
