12201 comments found.
Hello, I have a question before purchasing. Wordpress aside the menu width takes up less space than metronic. Although the Metronic appearance is beautiful, the space left for the main content is decreasing. Is there a possibility to change the width of the aside while building the html theme? I don’t want to edit it with css. We may need to manually fix it with every update or page.
Hi
,
Thanks for your interest in Metronic. Yes, the aside width can be easily changed in the SASS variable in themes\metronic\html\demo1\src\sass\layout\_variables.scss:
// Aside
$aside-config: (
z-index: 101, // Aside's z-index property
transition-speed: 0.3s, // transition speed
padding-x: 25px,
menu-indention: 0.75rem,
bg-color: #1e1e2d,
logo-bg-color: darken(#1e1e2d, 2%),
scrollbar-color: if(isDarkMode(), $gray-200, #3b3b64),
scrollbar-hover-color: if(isDarkMode(), $gray-300, lighten(#3b3b64, 3%)),
width: 265px, // Aside width for desktop mode
minimized-width: 75px, // Aside minimized width for desktop mode
box-shadow: if(isDarkMode(), none, 0 0 28px 0 rgba(82,63,105,.05)), // Aside box shadow
minimized-hover-box-shadow: if(isDarkMode(), none, 5px 0px 10px rgba(70, 78, 95, 0.075)) // Monimized hover box shadow
) !default;
Then recompile the assets folder with gulp or webpack.
For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html
Regards, Sean
Hi support. We are in the same situation as other Blazor developers that want to adapt and use your HTML version of Metronic for our webapp. And we are facing the same challenges with the javascript of the menus, etc.
In a previous comment, a user named m_josiah kindly offered sharing his Blazor solution that solves our javascript nightmares. Have you considered allowing him to share the code with us, so we can still use Metronic in our new Blazor project?
Thank’s a lot.
Hi,
Sorry for the late reply.
Unfortunately, we weren’t able to find any provided solution.
Have you followed our Blazor tutorial or it is your custom integration? https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html
If you faced any issues or errors, could you please describe them? So that we can fix them in an upcoming release.
Regards,
Lauris
I think there may be a bug with layouts. When I try to have a non-fixed header and a fixed toolbar, the toolbar covers up the header completely even when scrolled to the top of the page, what I want is for both to be visible, but then as the user scrolls down the page, the header disappears and the toolbar stays fixed to the top. Is there a quick css for this?
Hi,
Thanks for your feedback. The fixed toolbar works only with fixed layout. We will add a notice for this layout configuration.
We will consider the sticky toolbar layout in a future update. Which demo are you using ?
Regards, Sean
Demo 1
Nioted, thanks for the clarification.
Hello! I’m having problems with my menu when i am on mobile, https://imgur.com/XGEjHob <- the action buttons doesn’t open on mobile but it does work fine on desktop -> https://imgur.com/9l0nDLC, I already initialize KTMenu.createInstances():
$('table').on('draw.dt', function() {
$('[data-bs-toggle="tooltip"]').tooltip();
});
KTMenu.createInstances();
});
and this are my actions:
@if ($role->id !== 1)
<div class="card-toolbar">
<button type="button" class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary menu-dropdown" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end">
<span class="svg-icon svg-icon-2">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"/>
<rect fill="#000000" opacity="0.3" x="4" y="4" width="4" height="4" rx="1"/>
<path d="M5,10 L7,10 C7.55228475,10 8,10.4477153 8,11 L8,13 C8,13.5522847 7.55228475,14 7,14 L5,14 C4.44771525,14 4,13.5522847 4,13 L4,11 C4,10.4477153 4.44771525,10 5,10 Z M11,4 L13,4 C13.5522847,4 14,4.44771525 14,5 L14,7 C14,7.55228475 13.5522847,8 13,8 L11,8 C10.4477153,8 10,7.55228475 10,7 L10,5 C10,4.44771525 10.4477153,4 11,4 Z M11,10 L13,10 C13.5522847,10 14,10.4477153 14,11 L14,13 C14,13.5522847 13.5522847,14 13,14 L11,14 C10.4477153,14 10,13.5522847 10,13 L10,11 C10,10.4477153 10.4477153,10 11,10 Z M17,4 L19,4 C19.5522847,4 20,4.44771525 20,5 L20,7 C20,7.55228475 19.5522847,8 19,8 L17,8 C16.4477153,8 16,7.55228475 16,7 L16,5 C16,4.44771525 16.4477153,4 17,4 Z M17,10 L19,10 C19.5522847,10 20,10.4477153 20,11 L20,13 C20,13.5522847 19.5522847,14 19,14 L17,14 C16.4477153,14 16,13.5522847 16,13 L16,11 C16,10.4477153 16.4477153,10 17,10 Z M5,16 L7,16 C7.55228475,16 8,16.4477153 8,17 L8,19 C8,19.5522847 7.55228475,20 7,20 L5,20 C4.44771525,20 4,19.5522847 4,19 L4,17 C4,16.4477153 4.44771525,16 5,16 Z M11,16 L13,16 C13.5522847,16 14,16.4477153 14,17 L14,19 C14,19.5522847 13.5522847,20 13,20 L11,20 C10.4477153,20 10,19.5522847 10,19 L10,17 C10,16.4477153 10.4477153,16 11,16 Z M17,16 L19,16 C19.5522847,16 20,16.4477153 20,17 L20,19 C20,19.5522847 19.5522847,20 19,20 L17,20 C16.4477153,20 16,19.5522847 16,19 L16,17 C16,16.4477153 16.4477153,16 17,16 Z" fill="#000000"/>
</g>
</svg>
</span>
</button>
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold w-200px" data-kt-menu="true" style="z-index: 105; position: fixed; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(810px, 461px, 0px);" data-popper-placement="bottom-end">
<div class="menu-item px-3">
<div class="menu-content fs-6 text-dark fw-bolder px-3 py-4">
{{ __('Elija una acción:') }}
</div>
</div>
<div class="separator mb-3 opacity-75" />
<div class="menu-item">
<x-utils.view-button
:href="route('central.role.show', $role)"
permission="roles.read">
</x-utils.view-button>
</div>
<div class="menu-item">
<x-utils.edit-button
:href="route('central.role.edit', $role)"
permission="roles.update">
</x-utils.edit-button>
</div>
<div class="menu-item">
<x-utils.link
:href="route('central.role.clone', $role)"
class="dropdown-item text-start p-3 fw-light"
:text="__('Clonar')"
permission="roles.create">
</x-utils.link>
</div>
<div class="menu-item">
<x-utils.delete-button
:href="route('central.role.destroy', $role)"
permission="roles.delete">
</x-utils.delete-button>
</div>
<div class="mt-3" />
</div>
</div>
@else
<span class="badge badge-primary">
{{ __('No Disponible') }}
</span>
@endif
I’m using Metronic 8 Laravel v.8.0.30, is this a bug o i am missing something?
Thank you
Hi 
When the column is in the hidden row, there is an event. You have to add the listener to trigger after the column is shown.
I am referring to this example. Probably it could help. https://datatables.net/examples/api/row_details.html
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.dt-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open
}
else {
// Open row
// you can try to init dropdown here
}
} );
Thanks
not working 
Hi, 
We would suggest you to disable responsive option in the datatable, then for mobile view, you will have to use horizontal scroll. So the dropdown column will not be hidden.
responsive: false
Thanks
ReferenceError: KTUtil is not defined getting this error on Data Tables AJAX already send mail but no replay
Hi
,
Appreciate your patience . We have just replied.
Regards, Sean
Hi, Metronic 7 html theme code in React.
Trying to use this pricing table: https://preview.keenthemes.com/metronic/demo1/custom/pages/pricing/pricing-2.html in my react application. After Fixing a couple of problems. the code
Monthly Plans
does not shownor do the UI of both monthly and yearly Buttons changes style I would like your help with this.
Hi,
Sorry for the late reply.
I think in React version you can add a variable to switch the state of the pricing page and update it when the top buttons are clicked.
let state = "monthly";
Then in the component switch prices and other content depending on this variable:
{ state === "monthly" ? 12 : 13 }
Regards,
Lauris
Hi,
I would like to buy this theme, but I’m still new about using bootstrap or dashboard theme. I usually develop website based on Wordpress theme.
Can I use this theme for create custom report with table and chart? Can I create multiple account login with this theme?
What CMS should I use to build dashboard web with this theme?
Thank you in advance.
Hi
,
Thanks for your interest in Metronic.
Metronic is a custom HTML theme based on Bootstrap 5 and it requires further server side development according to a project requirements. It also has fully functional Laravel version with fully authentication, i18n support and some system modules to get started with any PHP based project. If you need any further clarifications please contact our support via support@keenthemes.com
For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html
Regards, Sean
Hi,
Thank you for your fast response. And thank you for giving me the link of the getting started documentation. It helped me a lot!
I will read and watch the video tutorial soon and can’t wait to order your beautiful theme!
Regards, Erlando
Great to hear your good start! All the best with your projects 
hi, im buying your metronic8 and using vue version, how i can prevent to scroll top for each route changes?
Hi,
You need to remove code below in file vue/demo1/src/router/index.ts.
setTimeout(() => {
window.scrollTo(0, 0);
}, 100);
Regards,
Lauris
Hi, i wanted to purchase these html admin theme, but i need ecommerce features in it, like shop page, product details, cart, checkout etc. is it possible that we’ll get this pages? plz reply urgently. Thank You.
Hi ),
Thanks for your interest in Metronic.
Sure, we will release complete ecommerce frontend and admin pages soon and you will get all future updates for free.
Regards, Sean
Any possible date? Thank You.
Sorry, we can’t confirm the date but we will do our best to release it asap. Stay tuned!
Dear team,
Please provide nestable in update ASAP
Hi,
The nestable plugin seems no longer supported by the author. If you know other nestable plugin please suggest us and we will check it further.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Alternate of nestable
please provide any alternate because wordpress and other companies also using
Noted, We will check this further if there is any alternative solution.
Hi,
Is there a way to safely use bootstrap floating labels with the current setup? I have tried to but unfortunately your theme configuration goes against it.
Hi
,
Thanks for your feedback. We will double check it. Would be great if you can email our support via support@keenthemes.com and provide screenshot/code to use in our investigate of this matter.
Regards, Sean
Hello! I am using metronic_v8.0.29 Demo 9 – Fancy Dashboard.
I have trouble to get select2 to show in-valid state with formvalidation.io
I am using <select name=”a” class=”form-select form-select-solid” data-control=”select2” data-placeholder=”aa” data-hide-search=”true”>
it does validation and puts .is-invalid <select name=”a” class=”form-select form-select-solid select2-hidden-accessible is-invalid” data-control=”select2” data-placeholder=”aa” data-hide-search=”true” data-select2-id=”select2-data-1-aqeq” tabindex=”-1” aria-hidden=”true”>
however it do not triggers any change in container for in .select2-selection.
formvalidation plugin: .... plugins: { trigger: new FormValidation.plugins.Trigger({ }), bootstrap: new FormValidation.plugins.Bootstrap5({ rowSelector: ”.fv-row”, eleInvalidClass: “is-invalid”, eleValidClass: ””, }), ....
in my case, desired in-valid stat should be border-color: #F1416C;
This https://formvalidation.io/guide/examples/integrating-with-select2/ dose not help.Thanks!
Hi
,
Have you checked our Select2 + FormValidation integration examples here https://preview.keenthemes.com/metronic8/demo1/documentation/forms/formvalidation/advanced.html#select2
Regards, Sean
Hi! Thanks. Yes, i did. And this implementation adds just message. All may validations using in-valid with border-color: #F1416C; and that is what i missing.
Hi,
At the moment this outline style for the Select2 validation is not available as it requires additional customization on the Select2’s markup. We will consider it in a future update.
Regards, Sean
Hi,
We have added this into our todo list and we will implement it soon and you can get all future updates for free. Thanks for your feedback on this.
Regards, Sean
Hi, thanks for adding it in ToDo. Really apricate and desperately waiting 
https://github.com/select2/select2/issues/5993
$(document).on(‘select2:open’, () => { let allFound = document.querySelectorAll(’.select2-container—open .select2-search__field’); $(this).one(‘mouseup’,()=>{ setTimeout(()=>{ allFound[allFound.length – 1].focus(); },0); }); });
Hi
,
Thanks for sharing this. We will check it further and consider adding it in a future update.
Regards, Sean
Good design in every admin theme
Thanks a lot )
Hi
i am trying to use metronic8 demo8 with Laravel 8 and Inertiajs every thing is working fine but my problem is when i navigate (without page refresh) using inertia navigation assets/js/scripts.bundle.js not working because menu dropdown/ minimize sidedar etc. not works but when I reload full-page it start working i am straggling for last 6 month but not fixed it.
just tell me how to re-init scripts.bundle.js from all function work properly.
Plz finding solution for last 6 month I don’t want to switch to another them because i link metronic8 too much plz help
Hi
,
Thanks for your interest in Metronic.
Please note that for SPA implementation you will need to dynamically initialize the components and layout as explained here: https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/customization/javascript.html#dynamic-initialization For the layout part you will need to refer:KTLayoutAside.init(); // mandatory KTLayoutSearch.init(); // optional
For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html
Regards, Sean
Thank you very much i fixed the issues by using below code
mounted() {
console.log('mounted');
// Boostrap & 3rd-party components initialization
KTApp.init();
// In-house components initialization
KTMenu.createInstances();
KTDrawer.createInstances();
KTScroll.createInstances();
KTScrolltop.createInstances();
KTSticky.createInstances();
KTDialer.createInstances();
KTImageInput.createInstances();
KTPasswordMeter.createInstances();
KTSwapper.createInstances();
KTToggle.createInstances();
},
no how to re initialized KTLayoutToolbar because there is no function called .createInstances(); some element not working like UiSllider.
And why i am getting this error if i call KTLayoutAside.init() my issues are fixed with out calling this by using above code. KTLayoutAside.init(); VM7515:1 Uncaught TypeError: KTLayoutAside.init is not a function at <anonymous>:1:15
Thanks again
Hi
,
Glad to help you out. Please note that the layout code is bundled within scripts.bundle.js so make sure it’s included in your page.
Then go to each layout class and disable auto initialization on page content load event(this is for classic pages only):
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTLayoutToolbar.init();
});
Then you can initialize it whenever you need within your SPA scope:
KTLayoutToolbar.init();
Regards Sean
thanks again
can u elaborate in detail how to do this “disable auto initialization on page content load event(this is for classic pages only):”
still getting this error
index.js??clonedRuleSet-5.use[0]
./resources/js/Layouts/AppLayout.vue?vue&type=script&lang=js:59 Uncaught (in promise) TypeError: KTLayoutToolbar.init is not a function
Please remove the below code the toolbar.js and call KTLayoutToolbar.init() when you need not once the page loaded.
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTLayoutToolbar.init();
});
?
Hi keenthemes,
I don’t remember if I allready asked this question, I’m sorry : but here’s the question anyway :
Regarding RTL layout auto adjust : are you guys implmenting in the future the auto adjusting for those : data-kt-menu-placement=”right-start” => data-kt-menu-placement=”left-start”
without us making if and else on every data-kt-menu-placement manually and explicitly ???
like it was in Metronic7, the menus will be auto layout if RTL is on .
thak you guys.
Hi,
In v8 we use more flexible KTmenu component and it uses HTML level attributes for the submenu alignments based on https://popper.js.org/ so it has to be handled at the HTML level since there use case of KTMenu depends on the user’s requirements and most of the time it depends on the parent container’s placements.
Regards, Sean
Thank you Sean,
wanted to know if I’ll wait for it or go the manual HtML setting route…
Thank you for the quick reply.
Sure thing, You are welcome!
Thank you!
Hi when do you release integrated version of metronic React with laravel?
Hi
,
We have just released our Laravel backend API. We will release the React Laravel version very soon since the Vue Laravel was just released.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
I bought this template. But, for some reason, the payment was not processed. Although, the money has been charged to my card.
Wrote to support, how long will they look into this? Very urgently I needed this template.
Hello,
Sorry to hear this. Yes, you are right that you have reached Envato support. Their support is very fast.
I would suggest you to wait for another day or two. If your issue is not solved until that and you need Metronic urgently, you may purchase another license and after your issue is solved, you can request a full refund for one of the licenses.
Please feel free to ask if we can assist you further.
Best regards, Bob
Okay, thank you.
I have this question, is there a dark version in all versions?
Hi,
Yes, all versions and demos(except demo4) support the dark mode. For the HTML version please check the dark mode setup guide here https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/dark-mode.htmlFor SPA versions:
Vue: https://preview.keenthemes.com/metronic8/vue/docs/#/dark-mode Angualar: https://preview.keenthemes.com/metronic8/angular/docs/dark-mode React: https://preview.keenthemes.com/metronic8/react/demo1-docs/docs/dark-mode
If you need any further help please do let us know.
Regards, Sean
well done for the new updated version. Great update.
But please the inbox page to be responsive as it doesn’t look good in mobile view.
Best regards,
Hi
,
Thanks for your feedback. Sure, we will check it further and provide an update with improvements as soon as possible.
If you have any other feedback please do let us know.
Regards, Sean
Hello, it seems that figma file for Metronic Version 8 has been well planned since 6 months ago. I really want to know is that file currently ready yet? [Pre-purchase Question]
Hi
,
We have included the available Figma files and illustration and duetone icons source files as well. It’s in the design folder of the download package.
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean
Hello, one question, when will SOLUCION CRUD REACT JS be ready, long ago were the next steps to be taken and nothing yet, could you give a date?
Hi,
We are now fully focusing on this and hopefully we will release it as soon as possible. At the moment we can’t confirm the ETA
Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes
Regards, Sean