Web Themes & Templates

Discussion on Metronic - Bootstrap 4 HTML, React, Angular 10, VueJS & Laravel Admin Dashboard Theme

keenthemes

keenthemes supports this item

Supported

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

9760 comments found.

When will you add VueJS version of demo 10?

Hi,

We will add Vue for all demos in upcoming updates.

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 need full html folder .. I m not able to use NPM to generate HTML.. I already sent a mail asking HTML ASAP.

Why I m gettting below errors?

npm ERR! code ENOENTive\Desktop\HTML\metronic_v6.1.8\theme\default\demo2>yarn npm ERR! syscall open npm ERR! path C:\Users\nagir\OneDrive\Desktop\HTML\metronic_v6.1.8\theme\default\demo2\package.json npm ERR! errno -4058 npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\nagir\OneDrive\Desktop\HTML\metronic_v6.1.8\theme\default\demo2\package.json’ npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\nagir\AppData\Roaming\npm-cache\_logs\2020-04-19T08_57_45_296Z-debug.log

Why in login-1 Forgot Password and signup is not working ?? . I hope you will answer ASAP.

https://keenthemes.com/metronic/preview/demo1/custom/pages/user/login-1.html#

Could you please add forgot password and signup also in login-1..

Hi,

In the meantime the login is a single form based template but you can create similar forget password, registration templates based on the login form. You just need to change the form inputs and you are good to go.

If you need any further help please contact our support at support@keenthemes.com

Regards, Sean

When the new demos will be available?

Hi :),

Thanks for your feedback.

We will start releasing them starting next week and every following week we are planning to release 1-2 new demos once we release v7.0 next week.

Regards, Sean

Hi, I created a scrollable KTDatatable and I noticed that top and bottom border of each row aren’t meeting with end of the div provided I applied kt-portlet__body—fit. Another issue with KTDatatable is event listners don’t work on KTDatatable links. While there’s no such issue in tables created with kt-widgets. Third issue, rows in KTDatatable don’t adjust their height according to the height of the div where the table is created. Please fix these issues.

PixelDots

PixelDots Author Team

Hi,

1) Could you please send the screenshot to support@keenthemes.com? We will need to check it further.

2) Please try to delegate the on click event at the root of datatable. For example;

var datatable = $('#kt_datatable').KTDatatable({...});
datatable.on('click', '.your-button-to-click', function() {
});
3) Please try to set the height option to null. We will fix the default height.
layout: {
height: null,
minHeight: null
}

Thanks

Hi Sean, how to integrate webpack.config.js with the laravel webpack.mix.js, please? Your Laravel Integration docs says nothing about integrating plugins, thanks!

codematiq

codematiq Author Team

Hi,

It is quite complex and demanding task to integrate the theme assets and it’s not something that can be done quick and relatively in quality standard. It is crucially important to understand the whole structure of Metronic and how assets are organised. But hey – we did this for you guys.

We are currently preparing Metronic integration with latest Laravel version. Hopefully in a short matter of time we will release it and hopefully that will solve all Laravel users requirement.

Is that something you could wait for next few days?

This sounds great, thanks! Good luck

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

riterix

riterix Purchased

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.

riterix

riterix Purchased

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

riterix

riterix Purchased

Thank you Sean.

jimil

jimil Purchased

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.

jimil

jimil Purchased

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.

jimil

jimil Purchased

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

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

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

    PixelDots

    PixelDots Author Team

    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

    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

    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. :)

    yss2611

    yss2611 Purchased

    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

    yss2611

    yss2611 Purchased

    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

    atahir

    atahir Purchased

    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

    riterix

    riterix Purchased

    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

    riterix

    riterix Purchased

    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! :)

    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 there, is possible to do this with your Metronic-datatable, please? https://keenthemes.com/metronic/preview/demo2/crud/datatables/search-options/column-search.html

    PixelDots

    PixelDots Author Team

    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

    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.

    PixelDots

    PixelDots Author Team

    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

    PixelDots

    PixelDots Author Team

    Hi,

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

    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?

    PixelDots

    PixelDots Author Team

    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

    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

    PixelDots

    PixelDots Author Team

    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

    PixelDots

    PixelDots Author Team

    Hi,

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

    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