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

over 4 years ago

Hello! where do i find all the functions i need to initialize? I’m using the HTML version in an angular 12 project, and there are things that don’t work like the hidden menu. kt_aside_toggle

Stam88 Author Team

over 4 years ago

Hi Alejandro987,

Please write email to our support support@keenthemes.com with your licence number and full details/examples of your case.

Regards, Keenthemes support

DJBMASTER Purchased

over 4 years ago

Why has Demo 3 now become Demo 7?

keenthemes Author

over 4 years ago

Hi ,

Thanks for your feedback.

We have some fresh demos coming that we like show on top. However this is just a demo number and no changes in the code.

Regards, Sean

DJBMASTER Purchased

over 4 years ago

I understand but it is not fair to drop these changes onto end users without making them aware ahead of time.

Please in future, communicate clearly your proposed future changes as to not mislead your users.

Imaging my suprise when I saw demo 3 now had a dark theme, and then I noticed that demo 3 has been changed and is now in fact demo 7 and I now have to use the ‘demo7’ folder/build scripts. This is an unnecessary change. If you want to add a new demo, increment the exist demo numbers – do not replace an existing number.

There isn’t actually a dark mode for the original demo3 – which we have been building our project with – so I downloaded it for nothing.

keenthemes Author

over 4 years ago

Hi ,

You are absolutely right. We missed that information in the changelog. Next time we will take it into account. And for the demo 7 we will enable the dark mode in the next update for sure.

Have a nice weekend ahead!

Regards, Sean

askinmoray Purchased

over 4 years ago

Hello there,

There is a plugin that links to https://svgjs.com/ in html_bootstrap5/theme/demo1/dist/assets/plugins/global/plugins.bundle.js that you have used.

If you notice at https://preview.keenthemes.com/metronic8/demo1/index.html , it adds an svg at the bottom just before the body closes.

svgjs=”http://svgjs.com/svgjs”

what is this ?

keenthemes Author

over 4 years ago

Hi,

Thanks for your feedback on this

This namespace URL is generated by Apexchart library as discussed here https://github.com/apexcharts/apexcharts.js/issues/2435

We will be following the Apexchart and incude the official fix as soon as possible.

Regards, Sean

keenthemes Author

over 4 years ago

Hey

We have been working on some amazing stuff and shortly we will be releasing:

1. HTML Version:

– Bootstrap 5.1.0 Update.
– Duotune – 300+ In-house Icons.
– jsTree.
– Vis-Timeline.

2. HTML Demo 3:

– Dark Mode.
– Layout.
– Pages.
– UI Elements.
– 3rd Party Plugins.
– In-house Components.
– Widgets.
– Layout Builder.
– Documentation.

3. Laravel Version:

– Demo 4.
– Demo 2 Dark Mode.
– Webpack Mix Improvements.
– Docs Improvements.

4. Vue Version:

– Demo 2.
– Demo 3.
– Docs Improvements.

5. React Version:

– Demo 2.
– Docs Improvements.

Next Up:

1. Laravel Version:

– CRUD Solution.
– 2 Steps Authentication.
– Application Settings.
– Integrated Charts.

2. More:

– Demo 8 HTML.
– Demo 9 HTML.
– Demo 10 HTML.
– Demo 4 Vue.
– Demo 3 React.
– Demo 1 Angular.

Stay tuned on endless updates to empower your projects.

All updates are free, always!

Regards, Sean

riterix Purchased

over 4 years ago

Hi keenthemes,

Is it possible to Increase the width timeline hour ?, here’s a image for more explanation : https://ibb.co/1XgHq5d

thank you

aziko_ Author Team

over 4 years ago

Hi,

Please change the timeline time element’s width in “metronic/theme/html/demo1/src/sass/components/_timeline-label.scss” sass file as shown below:

      .timeline-label {
            $label-width: 80px;
      }

Then recompile the assets folder with your preferred build method(gulp or webpack).

If you need any further clarifications please let us know.

Regards, Aziko

riterix Purchased

over 4 years ago

Thank you Aziko,

Will make 2 : .timeline-label : 80px and dateline-lable : 150px

thank you.

aziko_ Author Team

over 4 years ago

Hi ,

I am glad to help you out!

If you need any further help please let me know.

Regards, Aziko

FreelancerCGN Purchased

over 4 years ago

Hi!

The support center should be extended with a list of “own” tickets (which the user created), separated by a status (open, closed, waiting for user answer), a priority (high, normal, low) and an option to reply to open tickets.

HTML, Demo 5, dark mode

https://preview.keenthemes.com/metronic8/demo5/dark/apps/support-center/tickets/list.html

Best regards!

keenthemes Author

over 4 years ago

Hi ,

Thanks for your interest in Metronic.

Noted, we will consider implementing these improvements.

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

Regards, Sean

FreelancerCGN Purchased

over 4 years ago

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!

keenthemes Author

over 4 years ago

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

naseremadd

over 4 years ago

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?

keenthemes Author

over 4 years ago

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

riterix Purchased

over 4 years ago

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.

keenthemes Author

over 4 years ago

Hi ,

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

Regards, Sean

riterix Purchased

over 4 years ago

thank you

adenisdeveloper Purchased

over 4 years ago

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

keenthemes Author

over 4 years ago

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

adenisdeveloper Purchased

over 4 years ago

Of course, my fault. Thanks for the feedback.

keenthemes Author

over 4 years ago

No problem, you are most welcome

GeekTechChandighar Purchased

over 4 years ago

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.

keenthemes Author

over 4 years ago

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

jasbana Purchased

over 4 years ago

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

keenthemes Author

over 4 years ago

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

riterix Purchased

over 4 years ago

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

4 other replies

keenthemes Author

over 4 years ago

Hi,

We just tested this KTDrawer API with following code for the latest Metronic v8.0.21:

var drawerEl = document.querySelector("#kt_activities");
var drawer = KTDrawer.getInstance(drawerEl);

drawer.on("kt.drawer.toggled", function() {
   console.log("kt.drawer.toggled event is fired");
});

The result: https://imgur.com/urpBP2c

Can you please double check if the drawer element kt_current_patients in DOM exits during the call?

Regards, Sean

riterix Purchased

over 4 years ago

Hi Sean, thank’s for the reply.

Used your code, for exactly activities drawer to make sure that I wont miss a a thing

here the code :


<script>
var drawerEl = document.querySelector("#kt_activities");
var drawer = KTDrawer.getInstance(drawerEl);

drawer.on("kt.drawer.toggled", function() {
   console.log("kt.drawer.toggled event is fired");
});
</script>

here’s the browser console :https://ibb.co/Y8XyWwY Obviously if the drawer toggle, there’s the ”#kt_activities” in the DOM.

any idea ??? or should I update to 8.0.21

NB : I also used it on a fresh new, Metronic 8.0.17 (the original downloaded Metronic), I put the drawer script in index.html after all other JS script (at the end), the same error, “Uncaught TypeError: drawer is null”

thank you

keenthemes Author

over 4 years ago

Hi,

You will need to run the code on document ready event when all js scripts and DOM is fully loaded. For you can you jquery ready event handler or Metronic’s own solution:

// On document ready
KTUtil.onDOMContentLoaded(function () {
    // run any code here once DOM is ready.
});

Please give a try and let us know if you need any further help.

Regards, Sean

riterix Purchased

over 4 years ago

Hi Sean,

Thank you for the Last snippet, It Does work witht the Original Metronic Bare demo HTML.

But unfortunetly it doesn’t play well with htmx (My Ajax Drawer body load content).

for example I added this to the Activities toggle (hx-? attribute to load the activities content), and it doesn’t init the toolip :


<!--begin::Drawer toggle-->
<div class="btn btn-icon btn-active-light-primary w-30px h-30px w-md-40px h-md-40px" id="kt_activities_toggle" hx-get="{% url 'patients:current_patient_drawer_hx' current_patient.pk %}" hx-target="#kt_activities_scroll" hx-swap="innerHTML">
    <i class="bi bi-bell fs-2" />
</div>
<!--end::Drawer toggle-->

and here’s the javascript :


KTUtil.onDOMContentLoaded(function () {
    // run any code here once DOM is ready.
    var drawerEl = document.querySelector("#kt_activities");
    var drawer = KTDrawer.getInstance(drawerEl);

    drawer.on("kt.drawer.toggled", function() {
        console.log("kt.drawer.toggled event is fired");
        KTApp.init();

    });    
});

The console log indeed display “kt.drawer.toggled event is fired”, but TOOLIPS ARE NOT RE-INITIALIZED ???

Here’s the screen shot : https://ibb.co/g9Xrh3J

but here without hx-? attribute it works (No Ajax loading content of the Drawer): https://ibb.co/CP7YNgZ

So are you suggesting from now on to put all my EventListner inside this “KTUtil.onDOMContentLoaded” when it has to do with Metronic Components ? (like drawers, ...)

thank you

keenthemes Author

over 4 years ago

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

riterix Purchased

over 4 years ago

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.

keenthemes Author

over 4 years ago

Hi ,

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

Regards, Sean

Alejandro987 Purchased

over 4 years ago

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

keenthemes Author

over 4 years ago

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

poseso Purchased

over 4 years ago

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

PixelDots Author Team

over 4 years ago

Hi

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

Thanks

LiveDigi

over 4 years ago

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

keenthemes Author

over 4 years ago

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

flefle Purchased

over 4 years ago

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!

PixelDots Author Team

over 4 years ago

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

flefle Purchased

over 4 years ago

Perfect, thanks!

PixelDots Author Team

over 4 years ago

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

DevastedPHP

over 4 years ago

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

I am unable to find them in nav

keenthemes Author

over 4 years ago

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

DevastedPHP

over 4 years ago

Thanks for your great reply

keenthemes Author

over 4 years ago

You are most welcome

tonghoangkimlong Purchased

over 4 years ago

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

laurisstepanovs Author Team

over 4 years ago

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

spartanmediang Purchased

over 4 years ago

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.

keenthemes Author

over 4 years ago

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

Last Update	10 April 2026
High Resolution	Yes
Compatible Browsers	Firefox, Safari, Opera, Chrome, Edge
Compatible With	AngularJS, ReactJS, Bootstrap 5.x, Bootstrap 4.x, TypeScript
ThemeForest Files Included	PHP Files, HTML Files, CSS Files, Sass Files, SCSS Files, JS Files
Columns	4+
Documentation	Well Documented
Layout	Responsive
Tags	admin dashboard template, admin themes, angular, asp.net core, blazor, bootstrap 5, html, laravel, metronic, react, shadcn, tailwind, tailwind css, vuejs
Created	13 years ago

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

keenthemes supports this item

12208 comments found.

1. HTML Version:

2. HTML Demo 3:

3. Laravel Version:

4. Vue Version:

5. React Version:

Next Up:

1. Laravel Version:

2. More:

keenthemes

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

keenthemes supports this item

12208 comments found.

1. HTML Version:

2. HTML Demo 3:

3. Laravel Version:

4. Vue Version:

5. React Version:

Next Up:

1. Laravel Version:

2. More:

keenthemes

Tell us what you think!