Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Discussion on Metronic | Tailwind, Bootstrap, React, Next.js, Vue, Angular, Laravel Admin Dashboard HTML Template

Cart 119,691 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

This author's response time can be up to 1 business day.

12202 comments found.

Hi!

any chance to have a real layout example for Datatables.net ajax server with that button Filtereing options. like in normal datatables.net in the next update

+1

The layout with datatables.net AJAX should look similar to Demo 5/dark mode here: https://preview.keenthemes.com/metronic8/demo5/dark/apps/customers/list.html

HTML, Demo 5, dark mode

Best regards!

Hi :),

Thanks for your suggestion. Noted and we will check this in a future update and improve the Server Side Datatables Docs here: https://preview.keenthemes.com/metronic8/demo5/dark/documentation/general/datatables/server-side.html

Regards, Sean

Hello, I have plan to make a application as Fiverr, is there a ready made API to use it in the application? or I must develop the API?

Hi :),

Thanks for your interest in Metronic.

Metronic will be a great helper for the design and frontend part and the backend part you will need to implement by yourself. You can use PHP Laravel version of Metronic that can be a perfect foundation for your application:

https://preview.keenthemes.com/metronic8/laravel/login?demo=demo1

Regards, Sean

Hi keenthemes,

As there any chance to have a real layout example for Datatables.net ajax server with that button Filtereing options. like in normal datatables.net in the next update ??

would like also Calendar diffrenet entries with color.

Thank you.

Hi :),

Sure, these features are in our TODO and we will release them soon.

Regards, Sean

thank you

Hello, i downloaded metronic, however, there was no dark theme in the template.

Hi :),

Thanks for your interest in Metronic.

The dark mode’s css files are generated using gulp or webpack tools as explained here: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.html

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Of course, my fault. Thanks for the feedback.

No problem, you are most welcome :)

Hi I want to use Demo 4 of version 7 for my Angular project as it already shown in your theme demo that will support angular but after purchasing and downloading, I can’t find that just the first three demos for angular. https://preview.keenthemes.com/metronic/demo4/index.html#

Please help me with this, I really want that demo4 that why I purchased your theme.

Hi,

Thanks for your interest in Metronic.

As can be seen in our preview of Metronic v7 https://keenthemes.com/metronic/?page=metronic7 and Metronic 8 https://keenthemes.com/metronic/ the Demo 4 Angular version is not available yet. We will release it for the new Metronic 8 version with Bootstrap 5 and Angular 12 soon and you can download it for free along with all future updates.

For any further clarifications please contact our support via support@keenthemes.com

Regards, Sean

Hi Dears,

I have few questions: - I want to use local fonts instead of online font like google, how can i do it? - I want to have diffrent font so in ltr version i want font x and in rtl version i want font b how can i acheive that?

Thanks

Hi :),

Thanks for your interest in Metronic.

You can refer to https://www.youtube.com/watch?v=zJwx3Iw6iHc tutorial to learn how to include local font files into your build. Thus you can have 2 bundles for LTR and RTL versions generated separately with different font family files.

For any further assistance please contact our support via support@keenthemes.com

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Hi keenthemes,

I follow the doc for drawer, but wasn’t able to fire an event for a kt_drawer, here’s my drawer html :

<!--begin::Current Patients drawer--> <div id="kt_current_patients" class="bg-white" data-kt-drawer="true" data-kt-drawer-name="current_patients" data-kt-drawer-activate="true" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'320px', 'md' : '375px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_current_patients_toggle" data-kt-drawer-close="#kt_current_patients_close"> <!--begin::Card--> ... ... <!--end::Card--> </div> <!--end::Current Patients drawer-->

here’s my javascript : ``` <script>

var drawerEl = document.querySelector("#kt_current_patients");
var drawer = KTDrawer.getInstance(drawerEl);
drawer.on("kt.drawer.toggled", function() {
    console.log("kt.drawer.toggled event is fired");
});

</script> ```

Here’s my browser console error, telling me : Uncaught TypeError: drawer is null :

https://ibb.co/gtdWbXF

NB : The drawer toggle just fine, but I want to execute a function when the drawer toggle.

Any idea ?

Thank you

Hi :),

In a few hours we will release a new update with Bootstrap 5.1 and you can easiliy update your Metronic version.

The idea is to call the KTApp.init() for all tooltips, popovers initiazation and KTDrawer.createInstances(‘[data-kt-drawer=”true”]’), KTMenu.createInstances(‘[data-kt-menu=”true”]’), etc to initialize Metronic custom components once their reference HTML elements are populated in DOM. If you use ajax based method to load the page content or partials you should call the above initializers in when your ajax call is complete, upon the HTML is live.

If you need any further clarifications please let us know.

Regards, Sean

Thank you sooo much Sean,

It’s like a relieve, LoL

I will download it and open another fresh post, and we ill take it from thre.

sounds super interesting this new version.

thank you.

Hi :),

Sure, if you need any further help please do let us know.

Regards, Sean

Do you have the typeahead functionality implemented in the html version?

Hi :),

Thanks for your interest in Metronic.

The typeahead plugin is no longer maintained by the author. Current we have following relevant components:

https://preview.keenthemes.com/metronic8/demo1/documentation/forms/select2.html https://preview.keenthemes.com/metronic8/demo1/documentation/forms/tagify.html

If you need any further clarifications please do let us know.

Regards, Sean

Hello, there is a bug in Metronic 8 Laravel version, if you delete demo3 from public folder while using demo1 the icons from the aside menu dissapears because it’s looking for them in public/demo3/media instead of public/demo1/media

Hi :)

Thank for your feedback. We will check it the provide the necessary fix for it.

Thanks

Will the Metronic 8 for angular be ready until August 15th?

Hi,

Thanks for your interest in Metronic.

At the moment we are working on it but can not confirm the ETA yet. We will do our best to release it ASAP.

Regards, Sean

Hello,

I am trying to use version 8.0.21 as it has the BlockUI :)

But when compiling the project and trying to use the BlockUI (Even within the documentation), displays the following error in console.log

Uncaught ReferenceError: KTBlockUI is not defined
    at example1 (blockui.js:10)
    at Object.init (blockui.js:97)
    at HTMLDocument.<anonymous> (blockui.js:108)

Another detail is that when compiled with Webpack, several warnings are appearing

And congratulations to the team, the project is sensational!

Thank you!

Hi :)

We will if it in the next update. This is the workaround.

Please add the blockui.js file in this as example below.

tools/webpack/scripts.demo1.js

window.KTBlockUI = require('@/src/js/components/blockui.js');

Thanks

Perfect, thanks!

Your welcome :)

Sorry for the typo. We will include this fix in the next update. Let us know if you need any more help.

Thanks

Hi , In Metronic 8 , Demo 1 , Where can I find , Datatables Forms

I am unable to find them in nav

Hi :),

Thanks for your interest in Metronc

You can check the Metronic 8 DataTables.net integration here https://preview.keenthemes.com/metronic8/demo1/documentation/general/datatables/basic.html All form widgets and validation examples are here https://preview.keenthemes.com/metronic8/demo1/documentation/forms/formvalidation/advanced.html

if you need any further clarifications please do let us know.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes

Regards, Sean

Thanks for your great reply

You are most welcome :)

I want to integrate Metronic 8 (HTML version) with VueJS 3 manually (because I`m not familar with TypeScript)

But I dont know how to include yours script (plugins.bundle.js / scripts.bundle.js)

Please help me

Hi,

We highly recommend you to use our default Vue version of Metronic. Actually, any javascript code should be valid for typescript.

These are a bundled files, in vue better is to use the source files. html_bootstrap5/theme/tools/webpack/plugins/plugins.js for plugins.bundle.js html_bootstrap5/theme/tools/webpack/scripts.demo1.js for stripts.bundle.js

Regards,
Lauris

Hi,

Please I would like to use the Semantic UI for the datatables on the metronic template – https://datatables.net/examples/styling/semanticui both for styling and responsiveness.

How do I go about that please?

Appreciate your help.

Kind regards.

Hi :),

Thanks for your feedback.

I suppose this requires Semantic UI framework included while Metronic is based on Bootstrap 5.

Please let us know if you need any further clarifications.

Regards, Sean

Hello, First i just got this theme.

How can i make use of this theme in my existing laravel 8 project? If not avaliable.

How can i build my own theme from reading the docs eg I can’t find anything about aside and menus and etc

Hi :)

For the existing laravel 8 project, you may use the HTML version. You can integrate the assets (js/css) and make the layout base from HTML file.

You can also use partial files by download it from layout builder page;

https://preview.keenthemes.com/metronic8/demo1/layout-builder.html

Thanks

I wrote a gist for integration with rails (or any other framework) really https://gist.github.com/kamalptw/cad9cc02dc7d483aaa8f2e05ed2b8fc6 Please have a look

Hi :),

This is amazing. We will have a look further. Thanks for sharing this.

Regards, Sean

Where is the Tree Js in the last release i could not find it !!!

Could you share date please , I have release this Friday ,

Please we need the Js Tree ASAP !!!

Hi :),

Sure, we will try.

Regards. Seam

Hi, I am integrating metronic 8 + vue 3 + laravel 8. I got this error during install vuex-module-decorators via npm. How I can resolve this issue?

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: undefined@undefined npm ERR! Found: vuex@4.0.2 npm ERR! node_modules/vuex npm ERR! vuex@”^4.0.0” from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vuex@”3” from vuex-module-decorators@1.0.1 npm ERR! node_modules/vuex-module-decorators npm ERR! vuex-module-decorators@”*” from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with—force, or—legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! /root/.npm/_logs/2021-08-02T01_39_33_883Z-debug.log

Hi,

Have you followed our Vue+Laravel integration doc?

You do not need to install all dependencies manually, actually, you can just copy the example of package.json in doc and paste it into package.json in your app.

Delete your current node_modules folder and pacakge-lock.json and then execute npm install again.

Regards,
Lauris

hi, laravel + vue error ” 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? ” It gave such an error even though I made the same document. Can you help me?

Hi,

Can you please attach the configuration of your webpack.mix.js?

It looks like you have errors in it. You can copy a valid configuration from our doc:

const mix = require('laravel-mix');
const path = require('path');

mix
.ts("resources/ts/app.ts", "public/js")
.vue({ version: 3 })
.webpackConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'resources/ts/src/')
      }
    }
  });

Also please make sure that you have installed all required dependencies.

Regards,
Lauris

I added it but still the same error, can you support via email(yilmazoktay124@gmail.com)?

Sure, we will reach you shortly via your email address. Thanks.

Theme demo do not work with angular!. Support service very slow!!!

Hi,

May I know what is your Metronic version and demo ? If you contacted our support via email please let us know your email address so we can double check your request. As per current we have related to all cases related to Angular.

Regards, Sean

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey