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

keenthemes supports this item

Supported

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

12221 comments found.

Do you have any documentation guides to remove all mock auth modules for demo1 react? I am having an issue tracing the mock auth as codes are spreaded among multiple files.

maybe just to explain what im trying to achieve, not have any authenticaiton at all.

Hi zaidhoc

We don’t have docs about removing authorization. Try to start clear theme from ’/src/app/store/rootDuck’ and remove authReducer and dependencies. Also check ‘routing’, main index.js (mockAxios), and topbar with user info dropdown.

Regards, Keenthemes support

Hi,

Thanks, that helps!

Hi, We want the Angular 5 or Angular 6 version of the template? Can you provide?

hi, Mail sent. Plz check and revert. Thanks

hi getting this error on Installation:

npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 npm WARN deprecated tooltip.js@1.3.3: Tooltip.js is not supported anymore, please migrate to tippy.js npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 npm WARN deprecated fsevents@1.2.12: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm ERR! code Z_BUF_ERROR npm ERR! errno -5 npm ERR! zlib: unexpected end of file

Hi scriptfeedsdev,

Remove you node_modules and *lock files (from recycle bin too).

"npm cache clean --force" 
"npm cache verify" 
"npm install" (as admin rights)

Regards, ​Keenthemes support

From Demo 13? When I debuted?, I waited too long

Hi,

We will start releasing those new demos starting new week after releasing Metronic v7.0.

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

Regards, Sean

Really looking forward to see new demos, please update, i am loving those designs from images

Hi :)

We are working hard to release next week.

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

Regards, Sean

How do I apply tooltip on a cell of KTDatatable?

Hi,

You can use the template option in the KTDatatable columns settings and place the tooltip markup. You can find the template example in the source code.

Thanks

I tried but I am struggling to show html content in tooltips.

Hi,

Can you please try to reinitilize the tooltip after datatable init render is completed?

datatable.on('kt-datatable--on-layout-updated', function() {
  $(datatable).find('[data-toggle="tooltip"]').tooltip()
});

Thanks

Hi, I am using Demo1 Vuejs. the top bar with DropdownUser. With “My profile”, when I click on it. I navigate to my page but the menu is still open. How can I close the menu/dropdown whenever I change route.. Thanks

Hi,

Please try to place the code snippet below at main.js /theme/vue/demo1/src/main.js

router.beforeEach(() => {
  document.querySelectorAll(".dropdown.show").forEach(dd => {
    dd.classList.remove("show");
  });
  document.querySelectorAll(".dropdown-menu.show").forEach(dd => {
    dd.classList.remove("show");
  });
});

Thanks

Yes, This works if you are from Route A to Route B. But if you are at Route B already and try to click Topbar and select “my profile” again. This event will not raise. I find the “header” in topbar work fine. For example: Vuetify menu, with mega dropdown, select one to navigate and it collapses automatically.Any helps? Thanks

Hi,

Please give us some time, we have to check this further. And provide you with the fix soon.

Thanks

I imported your project in vuejs to another one of mine exists, but I’m fine with an error:

[INFO] Module build failed (from ./node_modules/sass-loader/dist/cjs.js): [INFO] SassError: $color: null is not a color. [INFO] ╷ [INFO] 181 │ $link-hover-color: darken($link-color, 15%) !default; [INFO] │ ^^^^^^^^^^^^ [INFO]

Do you have any idea what may be wrong?

Hi,

Have you included all the sass files from Metronic into your assets folder? /theme/vue/demo1/src/assets/sass

The entry of sass file is /theme/vue/demo1/src/assets/sass/style.vue.scss. Please try to import it in App.vue file.

<style lang="scss">
@import "assets/sass/style.vue";
</style>

Thanks

Hello I would like to know if using KTDatatable I can add a new row from javacript and work with the rows that is to say to be able to eliminate or edit the content of each row.

Hi,

Basically, if you are using the remote data source. You can modify the data at the backend service (add, edit, remove), then reload from the datatable using reload() function. The datatable will get the latest data available from the remote source.

datatable.reload();

Thanks

The question is how to do it in memory live with javascript add or remove rows

Hi,

At the moment, ktdatatable does not have this feature yet. We will consider adding it in the future updates.

Thanks

Hi there, is possible to do this with your Metronic-datatable, please? https://keenthemes.com/metronic/preview/demo2/crud/datatables/search-options/column-search.html

Hi,

Metronic ktdatatable does not support modification inside the table for column filtering. But it is possible if you make the form for filtering like below link, using the search method for a single column.

https://keenthemes.com/metronic/preview/demo2/crud/datatables/search-options/advanced-search.html

      datatable.search(value, 'columnName');

Thanks

HI, I have some questions before buying . 1. Can I buy regular license for using icons only for e-commerce platform? 2. Does graphic files include sketch library also? 3. Are you planing to add more angular 8 features from HTML demo ? For example message center?

Thanks

Hi,

Thanks for your interest in our theme

1) Yes, you can use Metronic elements in your product but if it’s commercial product that you sell to multiple clients then each sold copy must have own license. If it’s a SAAS product then you will need to purchase the extended license. One license is limited for one usage.

2) Yes, figma files will be included bu sketch files are limited to certain pages. Figma files include more pages.

3) Yes, we constantly update our theme and add new features and we will provide Angular 9 and more angular features in future updates.

if you need any further clarifications please let us know.

Regards, Sean

Thanks, and do you have icons only for sale? I’m about two colored icons.

Hi,

If you need only that icon set you can purchase it separately. Please contact our support at support@keenthemes.com and we will provide you the link.

Regards, Sean

Hi Sean,

Is there a way to insert an Image in Bootstrap select left side of options select ??

here my bootstrap select, filed with Vehicles names, I would like to insert in the left side a logo for a vehicle make. image : https://ibb.co/51mc4mr

found an example here https://codepen.io/Lihkinrian/pen/boOowo for .png images, but it is done in css, js, ... bloated stuff, is there a way to simplify it like you did with icons, I mean having “image=” attribute for each select ????

I know that there was a bootstrap select for icons : data-icon attribute, but it doesn’t help, is there any chances that you can implement that in the next update,

Thank you so much

Hi,

Sorry for the late reply. You can try to use data-content attribute to pass any HTML code and render the list as you wish:

<select class="selectpicker">
  <option data-content="<span class="badge badge-success">Relish</span>">Relish</option>
</select>
More info: https://developer.snapappointments.com/bootstrap-select/examples/#styling

Regards, Sean

Hi Sean,

You’are a life saver.

I tried to render it in the backend, but …

Even I used some hacky way of “for” “if” and “else” and manual select rendering in the django template (front-end), but :

It rendered perfectly fine ;)

here’s the output : https://ibb.co/WBm5v5j

Thank you soooooooo much.

You are welcome! All the best on your project! :)

Hello, I need the theme ONLY in bootstrap 4 ( I don’t need Vue, Angular or React) just plain bootstrap 4 – how can I find it?

Hi,

In the theme downloaded package you will get the default version as well. HTML+Bootstrap+jQuery version is available and you do not need to use other frameworks.

Please note that 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 jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk 2. Your First Project: https://youtu.be/yu0O2Y2NXxc 3. Customization: https://youtu.be/7PG5Qbg0-gM

Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Keen versions.

If you need any further help please let us know. 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

This week we start a new project with v6 and now, I see you are talking about v7. Of course, It is very good. But some questions come together with that situation. Is it major update? How effect us to integrate .net core mvc again? What will change in theme? If you have a plan, please tell customer for planing ownself.

So, do I need to wait?

Hi,

Thanks for your feedback.

We are trying our best to release v7.0 in next week. v7.0 will be the biggest update in Metronic history with both codebase and design improvements. We will be fully moving to the Bootstrap standard classes and remove all “kt-*” classes. I would suggest you to wait till v7.0 release since our future updates will be available for v7.x only. However the migration will should be quite smooth since we keep the overall theme’s layout structure and all the futures will be kept along with new features.

If you need any further clarifications please contact us at support@keenthemes.com

Regards, Sean

Thanks for reply. We will focus business part until v7 release. But it is big supprise for us.

We wait screenshots if you change design :)

Hi :),

Demo 1 is not changed that much but other demos are slightly improved to give them more modern look.

Regards, Sean

which setting or class Do I need to add for aside menu work with click on left angle arrow and right angle arrow. I dont want hover menu. Could you please tell me what I have to remove for clickable menu instead of hover menu.

Noted, we will check it further and try to find a solution. In the meantime could you please contact our support at support@keenthemes.com and we will update you via email.

Mail Sent I hope you can able to find solution to this issue. Other wise I cant use this ADMIN theme.

Noted, sure, we will update you soon. :)

Hello, I’m using demo 1 with the skin light aside, I want to change the color of the kt_header by adding the background-color style: # 2196F3; As I do to change the color of the letters and buttons when the mouse rests on them I want to change them to white. I am using the metronic_v6.1.7 version

Hi,

Sorry, we could not understand your issue. Could you please contact our support and provide more details ? Are you trying to customize the header menu or topbar ?

Which built method you are using ? Gulp or webpack ? Customizing the theme will be easier if you use gulp or webpack build tools.

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

1. Installation jQuery/Bootstrap Version Using Gulp: https://youtu.be/d-pSVf8Xazk

2. Your First Project: https://youtu.be/yu0O2Y2NXxc

3. Customization: https://youtu.be/7PG5Qbg0-gM

Please note that in the video tutorials refer to an older version of Metronic so some information can be inaccurate(file paths, folder structure, etc) but the overall instructions are valid for all Metronic versions.

Regards, Sean

Hi, How do I format header of a KTDatatable? I wan to add css properties by adding classes.

Hi,

Sorry. The class cannot be added via the options. You can use scss or css to modify the style. For example using the scss selector,

.kt-datatable thead th {
       color: black;
}

Let us know if you need further clarifications.

Thanks

Hi Is there any way to make aside

  • sticky ( First list item of aside menu )?
  • Hi,

    Yes, you can do it by it requires some changes to make it according to your requirements. You can try to customize the aside’s 1st item with fixed position.

    Regards, Sean

    Well, I am in the situation that I wanted to disabled my wizard titles. So that user have to press next button compulsory.

    However, the wizard title’s are not disabled, hence they are still clickable. Which make my mandatory pressing next button functionality is not mandatory anymore. As user can click the wizard title to get to the next step.

    I have found the doc here: https://keenthemes.com/metronic/?page=docs&section=wizard

    Where I have made the changes like below: “use strict”;

    // Class definition var KTWizardDiscount = function () { // Base elements var wizardEl; var formEl; var validator; var wizard;

    // Private functions
    var initWizard = function () {
                    // Initialize form wizard
                    console.log('init...');
                    wizard = new KTWizard('kt_wizard_v3', {
                                    startStep: 2,
                                    clickableSteps: false
                    });

    Even after set to clickableSteps: to false. I am still able to click on the titles to get to next step which I don’t want to happen. So can you please check & let me know what I am missing here.

    Thank you so much for your reply.

    Well, I am using latest metronic template-5 & using classic package method(which don’t require any tools). Metronic version I am using is 6.3 but not 100% sure.

    However, my code is as below: <!-begin: Form Wizard Nav -> <style> .kt-wizard-v3 .kt-wizard-v3__nav .kt-wizard-v3__nav-items .kt-wizard-v3__nav-item { flex: 0 0 17%; } .kt-wizard-v3__nav-label { font-size: 1.1rem !important; } .kt-wizard-v3__nav-label span { font-size: 1.8rem !important; } </style> 1 Dates

    I couldn’t find the option you was talking about “class kt-wizard-v1__nav-items—clickable ” & I am using the wizard v3.

    So can you please how I can do this here. As I don’t want the titles to be clickable.

    just ignore my previous comment as its fix now. All I did is replace the

    Hi :),

    Sure, all the best on your project!

    Regards, Sean

    LoL,

    I was about to suggest the same thing for the KTavatar, LoL :)

    I overcame that by making if and else, it wasn’t a proper one, but it did the trick,

    Hope to see that function included, YEs. it’s gonna be more than usefull :),

    Thank you.

    Yes,

    but as @invaderhd said, it has to be some sort of “data attribute” with the default “no picture” image source, I mean when you open the form for the first time you can get an image (no picture) like this for example (this is the image i’m using) : https://ibb.co/n8rwvyd

    after uploading image, the avatar should have that image.

    and when you cancel the image, the component detect if the input field is empty if so the avatar will get the first status (no picture).

    NB : For my part I made it, but with a lot of “if” “else” detection in django tempalte. I would appreciate if kavatar has this option out of the box, with me making a if and elses to check if the input has already avatar image.

    Hope I was clear. sorry.

    Hi :),

    Noted, we will take this into account in the next update.

    Regards, Sean

    Thank you Sean.

    I find a issue with KTavatar it should be possible to define a default image and the user must can delete the current avatar.

    I’m facing this problem, imagine the user upload some image and we want to delete it, and return to the default image, with your plugin we can’t achieve this we only can delete the image id is not submited yet. Any tips how to fix this?

    Hi,

    Noted, we will add “cancel” custom event so you can attach your handler and on cancel icon click you can set the current image for delete.

    May I know which Metronic version and build package(gulp/webpack) you are using ?

    If you are using gulp or webpack just go to the KTAvatar source and add this line

    // Fire cancel event
    Plugin.eventTrigger('cancel');
    

    In “theme\default\demo1\src\assets\js\global\components\base\avatar.js”

    // Handle avatar cancel
    KTUtil.addEvent(the.cancel, 'click', function(e) {
           e.preventDefault();
    
           // Fire cancel event
           Plugin.eventTrigger('cancel');
    
           KTUtil.removeClass(the.element, 'image-input-changed');
           KTUtil.css(the.holder, 'background-image', the.src);
           the.input.value = "";
    });
    

    After this change you will need to compile the theme.

    Then you can write your own event handler for cancel icon click and remove your image as per your requirements.

    If you need any further help please let us know,

    Thanks.

    Thank you for the quick response. I’m using webpack with Metronic 6.1.8, I can call the cancel event but there is any way to in some cases a single eventTrigger is not enough I need to add an extra on the end of the cancel handler.

    For example if I’m editing a user profile that already have an image, if I select a new image then cancel it even with this extra eventTrigger the code below it will run and I will end up with the original image but without the “cross” to remove the original image because the class “image-input-changed” was removed.

    I think the plugin should accept a data attribute with the default image for the cases where there are no image at all, in that cases the cross to remove the image disappear. If the image on the avatar is different from the default one we will allways get the “cancel image” option. It’s important to have the eventTrigger because, in a real implementation in some cases we will need to add a hidden field to tell the server that should remove the old image from the server, (for example you are editing a profile with an image then you remove it, when you submit the form it’s important to tell to the server that should remove that image)

    Hi,

    Noted, we will consider implementing this properly with some major changes in the next update v7.0 planned to be released in next week.

    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