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,124 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.

Hi, Amazing theme. Kindly assist with the html version of this table. It is rendered in JavaScript and i want to render it through html

The table is https://keenthemes.com/metronic/preview/demo1/custom/apps/user/list-datatable.html

Hi :),

You can check the HTML setup of KTDatatable here https://keenthemes.com/metronic/preview/demo1/crud/ktdatatable/base/html-table.html

But KTDatatable is not available in plain HTML since it’s fully jQuery plugins.

If you need static HTML tables please check them here: https://keenthemes.com/metronic/preview/demo1/features/widgets/base-tables.html https://keenthemes.com/metronic/preview/demo1/features/widgets/advance-tables.html

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, do you have any plan to implement component concept in Laravel 7 Blade ?.. https://laravel.com/docs/7.x/blade#components .. so for example displaying input text or checkbox, we can just call that component.. not copy all the html..

Hi :),

Thanks for your suggestion on this. We will definitely consider this. If you have other suggestions could you please send us via support@keenthemes.com ?

Regards, Sean

Hi there, How can I prevent page scrolling when scrolling an element using perfect-scroll? I tested this plug-in, and it worked as I wanted. https://jsfiddle.net/wxheL16q/

thanks.

Hi,

Thanks for your feedback. We will set it as default in v7.0.2 that we are planning to release in a few hours.

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, in latest update material ui’s effect on button click is missing. On click there was such kind of circle effect which is not gone. Now it does not look like material ui.

We will check it, Actually in React version we don’t use MaterialUI at all, all Layout is based on React-Bootstrap components and MUI was imported only for users.

Regards, Keenthemes support

Hi, Does this template supports material design ui components (https://material-ui.com)? Thank you.

Hi :),

Please check the React version of Demo1 here https://keenthemes.com/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

Hello, this happens when using webpack laravel mix: TypeError: $(...).tooltip is not a function TypeError: $(...).select2 is not a function Tried all the ways to fix it but with no success.

Hi,

Could you please share how do we reproduce this error?

Thanks

Hi,

We will include this fix in the next version soon.

Thanks

Hi keenthemes,

I’m using vuejs demo1, trying to change whole page theme to dark mode. Config for header and aside menu is there but not for content part. Any hints to accomplish this?

Hi :),

Just in case if you haven’t seen it yet, we are delighted to inform you that Metronic finally has its complete dark mode version. You can check the dark mode preview here https://preview.keenthemes.com/metronic8/demo1/dark/index.html

Regards, Sean

deleted

Hi keenthemes,

Same as @247webmaster above, when demo18 gonna be released ??..

And for the UI also, the “bold font” doesn’t play well with The beautiful Metronic that we knew, Since a lots people asked a bout the bold font Are you gonna ovverride it ??

thank you.

Hi,

Please check all the font related utility classes here: https://keenthemes.com/metronic/preview/demo1/features/bootstrap/typography.html

Using the helper classes you can have any text style you want.

Regards, Sean

I don’t like the bold font in the whole metronic

SO where/how to change it globally ?

thank you

Hi,

The Bootstrap’s standard font weight options are defined in html\demo1\src\sass\components\_variables.bootstrap.scss>

// Font Weight
$font-weight-lighter:                                 lighter !default;
$font-weight-light:                                   300 !default;
$font-weight-normal:                                  400 !default;
$font-weight-bold:                                    500 !default;
$font-weight-bolder:                                  600 !default;
$font-weight-boldest:                                  700 !default;

And you can override them in “html\demo1\src\sass\components\_variables.demo.scss” as shown below:

// Font Weight
$font-weight-bolder:                                  400;
$font-weight-boldest:                                  500;

Then compile it with gulp or webpack and you will get all bold fonts globally changed.

Regards, Sean

Using new HTML version, demo2. I have a question regarding the Perfect-Scrollbar script you have bundled. How can I access it’s other properties directly?

Initializing it could not be any simpler, kudos, but do you have a method to change wheelSpeed, swipeEasing, wheelPropagation (what I am most interested in), etc?

The author’s default behavior for wheelPropagation is false, your default behavior used to be the same but now is (options.windowScroll === false ? false : true).

So where and how can I set the windowScroll property? It looks hard coded to “false” in the scrollInit function which doesn’t make sense with the conditional expression to check if it was given a value.

There is no documentation for this.

Some more digging in scripts.bundle.js and found the ‘data-window-scroll’ attribute: // Pass options via HTML Attributes if (KTUtil.attr(element, ‘data-window-scroll’) == ‘true’) { options.windowScroll = true; } I tried adding data-window-scroll=”false” to my scroll element but it had no effect (it should keep the page from scrolling up or down when a user scrolls an element and reaches the end of the scroll). Mine still scrolls when set to false, however if I change the value for wheelPropagation to false a few lines below it works.

Side question, if the code is checking for a true value for “data-window-scroll” then why does the ternary expression for wheelPropagation assume true if it is options.windowScroll is not explicitly set to false? Isn’t the logic backwards? Eg., first check if data-window-scroll is true and set the options accordingly. Then if the options are true, the wheelPropagation is true otherwise it should be false.

Ok, so that is the issue. First: the attribute data-window-scroll (true | false) is correct. The problem is the mixed logic. Initially the code initializes and checks if that attribute is true and sets the option true, but there is no path to a false value because no case for false is given. When it gets to initializing PerfectScrollbar, options.windowScroll is either true or undefined so wheelPropagation looks at it as false if it the option is false and true for any other value, which would be true or undefined – it can only be true. Either options.windowScroll needs a default value if the user does not explicitly make it true or the ternary expression needs to be changed for wheelPropagation to (options.windowScroll === true ? true : false).

More documentation would be helpful for your bundled scripts about how to access the original authors options they worked hard to provide. By bundling them and not making them accessible it can have the effect of changing what the author made and/or limiting features.

Hi,

Thank you for your feedback.

We will check our PerfectScroll wrapper and expose all those parameters for easier configuration via HTML attributes in v7.0.2 update shortly.

Please note that you should not edit the JS code in scripts.bundle.js asserts folder. The code should be edited in “src” folder and with gulp/webpack you should compile it to assets folder.

For more info please check https://keenthemes.com/metronic/?page=docs https://keenthemes.com/metronic/?page=docs&section=html/javascript

Regards, Sean

Please can you give an indication when layout demo 18 will be available. It appears to be based on the orginal Metronic Classic. I am really disappointed in the direction that the UX of metronic is going. The layouts appear almost childish and not at all professional. This in turn requires a lot of customization (through trail and error) in the scss the get the look you want.

What is the reason from moving away from Bootstrap’s base material color scheme?

My other concern is the lack of backward compatibility. When you moved from v4 to v5 and then again from v5 to v6 and now from v6 to v7, all the classes etc. change. This means that any project created using an earlier version has to stay in that version as the time cost required to convert to the newer version can not be recovered. This in turn means that any of the new features is not available to older projects.

Thanks

Hi,

Thanks for your feedback.

Pending demos will be released as soon as possible. We can’t confirm ETA since we have other planned ongoing items for upcoming releases.

With v7 you can do most of the customizations in HTML level using standard bootstrap or custom. For example, those “kid” icons can be easily replaced with other icons. However our current design approach as much appreciated by the community as this is being confirmed b a great number of positive feedbacks.

We do provide support for all versions if there are any bugs or cortical issues. From now Metronic stays close to the Bootstrap standards.

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

Regards, Sean

Where do I download the old 6.x version? Thanks

Hi :)

Please send an email to support@keenthemes.com. We will send you the download link.

Thanks

Please check links on Docs File, I think its broken

Hi,

Sure, we will check it. Could you please let us know which page and section is broken ?

Regards Sean

If we extract the file

then open metronic_v7.0.1/doc/index.html From File Explorer- click Doc menu

All the link refer to wrong directory … for example: HTML section … link refer to metronic_v7.0.1/html/files-structure.html

but the directory structure is metronic_v7.0.1/doc/laravel-file-structure.html

All the menu is refering to wrong directory structure … Link For Angular is metronic_v7.0.1/angular-overview.html … missing ‘doc’ directory

Hi,

Noted we will check it further and fix in the next update v7.0.2 tomorrow.

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 guys, is there any tutorial for integration of the Laravel pagination and you KT Datatable, please? Thanks! Good luck.

Hi :),

At the moment we do not have such a tutorial. We will consider it.

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 notice most of your topbar dropdowns have no arrow pointing up/towards the icon. Any way to add an arrow?

Hi,

Thanks for your feedback. Sorry for the late reply. Could you please clarify your feedback ? Which OS and browser are you using ? What arrow pointing are you referring to ?

Regards, Sean

Its not a browser or OS issue. Your topbar dropdown menu has a gap between button and dropdown menu by design. Any way to add an arrow or at least bring it closer to the button when clicked?

Hi,

Thanks for your feedback. However this is how the original Bootstrap dropdowns work. According to the latest design trend dropdown arrows are not used anymore.

Regards, Sean

React 7.x

When i have the following config

subheader: { display: true, displayDesc: true, displayDaterangepicker: false, layout: ‘subheader-v1’, fixed: false, width: ‘fluid’, clear: true, style: ‘solid’, },

the datepicker quick actions still appears. Is it a bug?

Hi hashamv,

It’s for dateRangePicker, not for datepicker. Demo1+Subheader-v1 don’t have dateRangePicker. It’s a property for other demos+subheaders which will be implemented later.

Regards, Keenthemes support

Is there a way to move the Condense Aside button to the header section so that when the aside is condensed a small version of the logo can be shown?

I want to use the condensed version of Aside by default but the APP branding is completely lost bcos of the placement of the button.

React v7

Hi,

At the moment this options is not available but we will consider it and think how to implement it properly. If w decided to implement it we will release it in a future update soon.

Regards, Sean

Anyway you can suggest how I can do it. So I wont have issues updating future updates of the theme. It looks really odd with out the branding :-(

Hi,

This kind of change requires major changes on the layout so we rather implement it as option in a future update. We liked your suggestion and let us consider and implement it as an option.

Regards, Sean

Does this theme use an outdated version of Datatables?

I’m trying a specific function:

var row = table.row( tr );

Which returns the error ‘table.row is not a function’. In browsing the DataTables documents, I see that this is due to version being outdated.

When I remove the reference to Metronic datatables:

<script src=”../../assets/plugins/custom/datatables/datatables.bundle.js”></script>

And replace with current DataTables CDN

<script type=”text/javascript” src=”https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.js”></script>

It works fine

Hi,

We use latest DataTable. You can verify it in the package.json file. Which compiler are you using? is it hulp or webpack?

Thanks

Webpack

Hi,

Could you please check on this example datatable? /theme/html/demo1/src/js/pages/crud/datatables/extensions/select.js

We have this table.rows() function call. It should be similar. When you compile using webpack, it works.

var table = $('#kt_datatable_2').DataTable();

table.rows($(this).closest('tr')).select();

I’m refering to Metronic v7.0.1

Thanks

Hi, Is it possible in formvalidation to exclude 2 input at the same time? For example, If user_id have value then i want password and password_confirmation input to be excluded. thanks

that’s not so true the latest release is in 2019-06-15, maybe they do not release a new version because they are so complete and have all the feature already. even if it’s true they have all of the features, they have a very big community and a lot of contributors. it makes it reliable in support. It is so easy to find the answer in Stackoverflow either.

For my case the link you give is not the solution I expected, the best solution is using the Excluded plugin: https://formvalidation.io/guide/examples/excluding-field-by-given-condition but it can only be applied for 1 input.

For me now the only solution is to disable success alert. This plugin is great, and my case is so rare because it’s so complex. But what makes upset is the support. I don’t really mind if I have to pay for the support, but it seems even if I paid for the lIcences I won’t get any support. I try to contact the developer already by email and their social media but haven’t got any reply. oh well, never mind. Thanks

Hi,

Can you please contact our support at support@keenthemes.com and provide a complete requirement for your case? We will try to implement a custom plugin using FormValidation. I believe a custom validator can be created with a custom logic quite easily. Actually you can grasp this plugin’s code and extend it further to cater your requirements: : https://formvalidation.io/guide/examples/excluding-field-by-given-condition

Regards, Sean

wow, that cool, sent it already. Thanks :D

Hello, I’ve downloaded the latest version 7.0.1 but it lacks for correct documentation. The paths shown in the documentation does not fit the folder structure. Another thing is that I’m not able to change the theme colours. The builer says that I have to change the file located in src/app/core/_config/layout.config.ts and click the export button, Button there is no export button. I changed the colours and deleted caching, still not managed to change the colours. Your documentation is really poor, sorry

Hi abadid,

Thank you for your message, we will check ‘Alert Notification’ in Builder of Angular version. Documentation will be revised.

- If you are changing layout.config manually in code-editor, need remove localStoage first, and refresh the page then. In this case it will be applied.

- If you are changing Layout through Builder, it should be applied after a click on ‘Preview’ button.

- Angular version shouldn’t have ‘Export’ button, there we have code-viewer. (Alert Notification as I said will be changed).

Regards, Keenthemes support

Hello ad1zka,

The steps you mentioned is not working. To reproduce the error, please follow these steps:

1. Download the metronic 7.0.1 zip file and extract it. 2. Run npm install 3. Run ng serve 4. Visit localhost:4200 5. Change the colors.theme.base.primary color into something else, in my case #F85046 6. Go to localhost:4200 and clear the cache 7. Refresh page

You will notice that nothing will change.

On the other hand, if you change the color here: src/assets/sass/components/_variables.demo.scss it will work. But what is the meaning of layout.config.ts then?

Hi abadid,

Didn’t understand your needs properly, Yes, you are right, colors of the theme should be changed in ‘variables.scss’. Through latout.config.ts you able to manage ‘dashboard charts’ color/fonts and Layout elements.

Regards, Keenthemes support

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