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 120,084 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

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

12220 comments found.

Hello dear support team. First of all, thank you for your help. I’m using Demo12. When I create a list in the “Header Menu” and add about 30 items, the menu grows and some items in the list fall under the screen and the scroll bar does not appear. Is this a way to create the scroll bar when I click the menu button that contains too many items for the list? Thank you

Hi,

Unfortunately the header menu does not support this case. You can consider to change menu structure and move some items into submenu.

Regards, Sean

novermind-thx

Hi :),

Yes, you can use https://getbootstrap.com/docs/4.0/components/carousel/ or https://owlcarousel2.github.io/OwlCarousel2/ that comes integrated in Metronic

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

Bootstrap carousel is too basic. Owl carousel is good but it’s deprecated and no longer maintained. I ended up by using tiny slider, which is recommended by owl carousel author. Maybe you would like to include it in your next update https://github.com/ganlanyuan/tiny-slider

Thanks for sharing this. This plugin looks pretty good. We will check it further and consider integrating it with Metronic.

When will you release the native VueJS version coming ?

Hi :),

It’s in progress and we are targeting to release it in 1-2 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, How to lock the pop-up window that can’t be closed without pressing close? IMAGE: http://prntscr.com/pf9rgq

Thanks

Anyone who needs this option can add this code data-backdrop=”static”

Yes, that’s correct. Thanks for sharing info :)

In your demos of validation state of form widgets, one get problems with centering – is bootstrap select. When error text appear, cross icon positioned as background centering 50% of vertical height of total area, not of select area. This cause offset…

To fix that I modified your jquery-validation.init.js file

if (element.closest('.bootstrap-select').length > 0) { //Bootstrap select element .closest('.bootstrap-select') .wrap('<div class="bootstrap-select-wrapper" />') .after(error); }

Hi :)

Thanks for your feedback. We will check this issue further and include the fix in the next update.

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

Whats the difference in default and classic folders?

Hi,

The classic folder contains precompiled theme without build tools and the buildable(default folder) version request to install the build tools and compile the theme. We strongly recommend using the buildable version over the classic version since it uses latest frontend development standards.

You can check our video tutorials to learn the best practices of using Metronic in real world projects:

1. Installation & Getting Started Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Installation & Getting Started Using Webpack: https://youtu.be/gMUbZMdDRCo 3. Your First Project: https://youtu.be/yu0O2Y2NXxc 4. 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.

Regards, Sean

Thank you Sean

Good morning My name is Cristian.

Is it possible to integrate Metronic components with ReacJs?

Would you have a tutorial to follow for integration?

Thanks :)

Yes, we have released the React for Demo1.

You have one video tutorial for instalation

Hi :),

The react and angular video tutorials will be coming soon. We are working on them currently.

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

When using wizard.goFirst(); I get an error saying Uncaught TypeError: Plugin.getFirstStep is not a function.

Solved it by using wizard.goTo(1); instead

Hi,

Thanks for your feedback. We will check it further and fix it in the next update.

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

Great theme!! Is there a posibility that in a “toggle” you can mouse select the text to copy/paste?

thankyou!! Sergio

div class=”list-todo-item grey-salt” a class=”list-toggle-container font-white collapsed” data-toggle=”collapse” href=”#task-1-” aria-expanded=”false” div class=”list-toggle done “

Hi :),

Thanks for your feedback. Unfortunately this features is not supported yet. But you can customize it further and implement by your own.

Regards, Sean

I would like to report an issue with KTWizard.

After the recent update goTo(number) method stopped working when used inside beforeNext or beforePrev events however it works fine when used inside change

Examples
- beforeNext
    wizard.on('beforeNext', (wizard) => {
        wizard.goTo(3) // dosn't work 
    });
- beforePrev
    wizard.on('beforePrev', (wizard) => {
        wizard.goTo(3) // dosn't work 
    });

However, it only works here

    wizard.on('change', (wizard) => {
        wizard.goTo(3) // works 
    });

Hi :),

Thanks for your feedback. We will check it further and fix it in the next update.

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

I try to use the Metronic admin Template with MVC Project. I found some difficulties while include style files and Script files in bundles. Page always have and error related to missing js files or the order of files

I hope i can have a resources to find how to include js and css file in MVC project, which files must be exist and which files can be neglected based on requirements .

Hope i can have a sample project

Hi,

First of all thanks for choosing Metronic.

In order to launch the theme you will need to generate the “dist” folder from “src” folder by installing and running the build tools in command line. All the required steps are explained in the documentation https://keenthemes.com/metronic/?page=docs and also in the below video tutorials:

1. Installation & Getting Started Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Installation & Getting Started Using Webpack: https://youtu.be/gMUbZMdDRCo 3. Your First Project: https://youtu.be/yu0O2Y2NXxc 4. Customization: https://youtu.be/7PG5Qbg0-gM

If you need any further help please let us know.

Please follow us at http://twitter.com/keenthemes to stay updated.

Regards, Sean

Deer Metronic Team;

I think there is misunderstanding for my post, the only problem I face is that how to integrate the Metronic theme with MVC project and I would like to have assists in this area (the required css file and js files to be used in bundles) .

as after i include all the required css files and js files as mention in the index page of default demo 1 the side bar is malfunction

I hope that I mention my problem clearly

Hi,

Seems some CSS/JS files are missing or not loaded in the right order. Could you please double check your HTML code that generated by your server side code and compare it with the original HTML code ?

If possible can you please deploy your site to your test server and provide us a test link via support@keenthemes.com ? We will need to check your page and debug it’s code using Chrome dev tools in order to investigate your issue.

Regards, Sean

Any idea when Demo 13 SASS version is planned to be released. I like the Demo 2 but Demo 13 looks cleaner with the header. Looking forward to the release.

Hi,

Thanks for your feedback.

We are now quite busy with React & Vue versions and we will attend to those pending demos in the near future.

Regards, Sean

Any indication on when the VUE version will be launched? We are using Vue and was wondering if its coming any time this month so we would wait.

Hi :)

We are doing our best to release it in 4-5 weeks.

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

Any Plans of including ChartJs and Chartist Graph libraries?

Hi :),

Thanks for your suggestion. We will consider this in a future update. If you need those plugins you can install it by yourself and include them into your build and compile with gulp or webpack.

You can check our video tutorials to learn the best practices of using Metronic in real world projects:

1. Installation & Getting Started Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Installation & Getting Started Using Webpack: https://youtu.be/gMUbZMdDRCo 3. Your First Project: https://youtu.be/yu0O2Y2NXxc 4. 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.

Regards, Sean

Any plans of coming up with VueJS version of the template?

Hi :),

We are working on it and it should be released in 1-2 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

I found a HUGE bug with internal utility function named “get” wrong in this line and below: else if(el = document.getElementsByTagName(query))

if any plugin need to be initialised on className (not id), will be a problem, because getElementsByTagName always return an array. In this case, next if will be skipped, and my initialisation on className will do nothing!

next line

if (el = document.getElementsByClassName(query))

- the same thing!

To fix that use .length > 0 inside if Full working code:

if (el = document.getElementById(query)) { return el; } else if (el = document.getElementsByTagName(query), el.length > 0) { return el[0]; } else if (el = document.getElementsByClassName(query), el.length > 0) { return el[0]; } else { return null; }
Also, addEvent: function(el, type, handler, one) { el = KTUtil.get(el); if (typeof el !== 'undefined') { el.addEventListener(type, handler); } }, if KTUtil.get(el) will return null, typeof of null will be “object”.

Fix

typeof el !== 'undefined' && el !== null

NOTE: this need to do in all functions used .get or return undefined

Hi :),

Good spot! Thanks for your feedback. We will fix in the next update very soon. Really appreciate your contribution!

Regards, Sean

How can I extract one component to use it for standalone, for example the Kdatatable.

Hi,

You can extract the KTDatatable component by removing other unused SASS/JS code and creating a custom build with KTDatatable and it’s dependencies. In order to do so you will need to check the documentation and video tutorials to fully understand the Metronic structure and build tools.

You can check our video tutorials to learn the best practices of using Metronic in real world projects:

1. Installation & Getting Started Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Installation & Getting Started Using Webpack: https://youtu.be/gMUbZMdDRCo 3. Your First Project: https://youtu.be/yu0O2Y2NXxc 4. 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.

Regards, Sean

When will the vue.js version be released?

Hi,

We are still working on Vue version and hopefully we can release it in 1-2 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

Hello

When I use wizard 1 and set clickableSteps: false, steps are still clickable.

I used this example js https://keenthemes.com/metronic/themes/metronic/theme/default/demo2/dist/assets/js/pages/custom/wizard/wizard-1.js and just changed clickableSteps to false, but it’s not working.

Is this a bug?

Thank you

Hi,

May I know which version of Metronic are you using ? We have fixed this issue since Metronic v6.0.8. Current version is v6.0.9 and we would suggest you to update your version with the latest one. In the latest version we updated some HTML and JS code.

Regards, Sean

I’m using 6.0.5. Nice to hear it’s fixed already. Thank you.

You are most welcome :)

hi, I added AJAX (delete) in the table and it doesn’t work – There seems to be a problem with this file: assets/js/pages/crud/datatables/advanced/row.php

Example of the code:

$( document ).ready(function() { $(’.delete_person_team’).click(function(){ if (confirm(‘Are you sure you want to delete this message?’)) { $(this).closest(‘tr’).children(‘td’).addClass(‘deleteHighlight’).animate({ padding: 0 }).wrapInner(‘ ‘).children().slideUp(function() { $(this).closest(‘tr’).remove(); }); var id = $(this).attr(‘data-person-id’); $.ajax({ type: ‘POST’, url: ‘https://web.co.il/Shield/Admin/ajax.php', data: {‘action’:’delete_person_team’, ‘id’: id}, success: function (data) { data = jQuery.parseJSON(data); if(data.msg==’success’) { //alert(“Added!”); } } }); return false; }}); });

Hi :)

Is it datatable with row grouping? Was there any error in the console log?

Thanks

Can you see the code? I’ll get you details?

Thanks!

Hi :)

Can you please change this part
$('.delete_person_team').click(function() {...

to

$(body).on('click', '.delete_person_team', function() {...

Thanks

Hi, quick question about changeDetection: ChangeDetectionStrategy.OnPush I see changeDetection: ChangeDetectionStrategy.OnPush in app.component and i have some troubles with it. library about take a tour guide it not showing corectly. when i remove changeDetection: ChangeDetectionStrategy.OnPush from app.component it fine, library work perfect.

My question: if i remove changeDetection: ChangeDetectionStrategy.OnPush from app.component. Any problem with Metronic themes ?

Hi,

Have you injected in your component’s contructor?

    constructor(private cdr: ChangeDetectorRef) {
    }

If you trigger the view changes in Service, as alternative, can you please try to use ApplicationRef and tick() method?

import {Injectable, ApplicationRef } from '@angular/core';

@Injectable()
export class GuidedTourService{
  constructor(private ref: ApplicationRef) {}

  startTour() {
    // changing view
    this.ref.tick();
  }
}

Let us know the result.

Thanks

Nothing happenned with this.ref.tick();

I try run setInterval() for detectChanges() when i start running startTour() when i finished tour guide => i clearInterval()

it’s working fine :v

maybe it’s not correct concepts.

Hi :)

Glad it worked. Consider it solved then?

Thanks

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