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.

9749 comments found.

c3jack

c3jack Purchased

Hi: Can I use typescript in React version? Is there any documentation for the React version, especially for the Material Design. Do you implement all component in Material Design (ex. stepper, tables,.....), or you have any improvement on Material Design ? Thanks.

ad1zka

ad1zka Author Team

Hi c3jack,

About typescript. Our React application is based on Create-React-Application. There is the official documentation of adding TypeScript into CRA projects.

We use Material-UI library (https://material-ui.com/) in our React application, all components (including stepper, tables and so on) from this library will work fine in our theme.

Regards, Keenthemes support

Hi,

I am using Angular version (as far as I understand from other comments React version has the same case as well). LayoutConfig is stored in localStorage and the changes to layoutConfig is not reflected until localStorage is removed (or modified) manually.

Removing browser localStorage is OK for a developer but for an end user?

So I think changes should be reflected without removing localStorage.

What do you think?

Regards

ad1zka

ad1zka Author Team

Hi ali1024, Please read comment about localStorage again. If you changed props in LayoutConfig.js file you should remove localStorage. We didn’t write that end-user should remove localStorage (user doesn’t have access to sourceCode, including LayouConfig).

Regards, Keenthemes support

Hi,

Thanks for the prompt reply. I may not have expressed myself correctly. Let me explain in a more detailed scenario as follows..

I took a prod build and put it online. Users reached the site so they have layoutConfig in their localstorage now. After some time, I changed the values in LayoutConfig.ts and took another prod build and put it online again. Then existing users reached the site again and they don’t see changes, because the layoutConfig in their localStorage are not reloaded from the server.

So, what do you suggest here? Is it something we should cover with some extra coding maybe? If yes, it will be great to hear your guidance where and what to do.

Best

ad1zka

ad1zka Author Team

Hi ali1024,

It’s easy to achieve that, Just need rename localStorage keyName ‘layoutConfig’ for your each build. Convert this keyName as const or move into the envorinments, use new params in ‘src/app/core/_base/layout/services/layout-config.service.ts’ file in ‘(save/get)config’ methods.

Regards, Keenthemes support

Hi. Can we remove Jquery package with Metronic VueJs project?

PixelDots

PixelDots Author Team

Hi,

Sure, we will remove it. At the moment, it is required for bootstrap js. We will find an alternative.

Thanks

Is there a hmtl bootstrap 4 version of this template included?

Hi :),

Yes, sure. Metronic include HTML, Angular, Vue, React versions are all versions can be used separately.

You can see the default HTML version of Metronic demo1 https://keenthemes.com/metronic/preview/demo1/index.html Other demos you can see using Metronic’s preview: https://keenthemes.com/metronic/

Regards, Sean

Hello, could you tell me which are the files to modify to change the styles of the kt_header element. I would like to change the background color, the icons, the text, etc.

Hi,

You should use Metronic with gulp or wepback in order to customize the theme.

Most of the header styles are customized in “theme\default\demo1\src\assets\sass\global\layout\header\_config.scss” Actual header styles are defined in “_header.scss”, “_topbar.scss”.

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.

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

amlife

amlife Purchased

Hello

how can I increase quick panel “Sidebar” width size, the answers I found are from 5 and 7 years ago and it didn’t work.

I’m trying to increase the width by 30px

Your support is highly appreciated

Hi,

If you are using the buildable version of Metronic you can get it done in seconds.

Go to “theme\default\demo1\src\assets\sass\global\layout\_config.scss” and change the aside width variable there. Then you just need to recompile the theme.

For more info please check the documentation and video tutorials here: https://keenthemes.com/keen/?page=docs Just a friendly reminder. In order to request a theme support you will need to have an active support subscription. To check your subscriptuon status or renew it you can go to the Metronic page and refer to the support info below the theme price panel. https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469

Regards, Sean

I need new demos, Pleae update

Hi,

Expect Metronic 7.0 next week(we are doing our best however this an ETA) with 10 updated demos and the rest of the demos will be delivered fast right after the v7.0 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

beproud

beproud Purchased

Hi, First time a try the angular theme, after calling “npm install” i got this message: found 9 vulnerabilities (4 low, 3 moderate, 2 high)

Is it a big threat?

Thanks

(Angular 9)

ad1zka

ad1zka Author Team

Hi beproud,

What do you mean Angular 9? We don’t have Angular 9 version of Metronic application.

About warnings during ‘npm install’ – there are no any breakable 3d party libraries (except ngx-daterangepicker-material)

Regards, Keenthemes support

poseso

poseso Purchased

new demos or metronic laravel version :)

WIll be both :) Laravel version for demo1 is done and ready to release next week. Stay tuned!

Am getting the following error when I try to run the clean metronic demo1 react version

Failed to compile ./node_modules/@material-ui/lab/esm/internal/svg-icons/Add.js Attempted import error: ‘createSvgIcon’ is not exported from ’@material-ui/core/utils’. This error occurred during the build time and cannot be dismissed.

ad1zka

ad1zka Author Team

Hi harshamv,

Check your package.json: ”@material-ui/core”: “4.7.0”, ”@material-ui/icons”: “4.5.1”, ”@material-ui/lab”: “4.0.0-alpha.33”, ”@material-ui/pickers”: “3.2.8”, ”@material-ui/styles”: “4.6.0”,

Pay attention that all libraries are without ^ symbol. Remove your node_modules+*.lock files (from recycle bin too) and reinstall packages. I hope it helps you.

Regards, Keenthemes support

Hello, I have a couple of questions before I buy

1) Do you have any services ready to use in HTTP API requests? 2) Do you have any authorisation implementation ready? Login, register, limited access etc? 3) If 2 is yes, do you also have anything about different groups of access? 4) If 2 is yes, do you also support JWT?

ad1zka

ad1zka Author Team

Hi Stackprime,

Write us first, which version do you mention? Angular/Vue/React/HTML

Regards, Keenthemes support

Sorry I thought it would be the same for all (except HTML). I am interesting in React. But if the above are available only in one of the other versions (Angular, VueJS), I am willing to know as well. Thank you

ad1zka

ad1zka Author Team

[1) Do you have any services ready to use in HTTP API requests?] Yes we have examples of HTTP requests based on Axios (We don’t use API, we prepared FakeAPI which can be switched when real API be ready).

[2) Do you have any authorisation implementation ready? Login, register, limited access etc?] Yes we have authorization module with login/registration

[3) If 2 is yes, do you also have anything about different groups of access In React version] We haven’t implemented User-Management module yet

[4) If 2 is yes, do you also support JWT?] Our AuthModule is using authorizationToken based technique which easily can be used for JWT

Regards, Keenthemes support

When is the update going to be released?

Hi,

We gave ETA and with such big update it’s hard to predict the exact date but we are almost there. Coming weeks we will release it according to our current progress.

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

Regards, Sean

Now you are saying coming weeks. Why can’t you release a few for now? I’m debating on buying either your theme or another one. I might go with the other if there’s no update soon.

Hi,

Metronic has to be released at once as a whole product with HTML, Bootstrap, Angular, Vue, React and now Laravel. We are really close to the release. Just a matter of a few days.

Regards, Sean

It comes with a landing page? Do you use React hooks o classes based components?

Hi,

Our React experts will reply you on this shortly.

Regards, Sean

ad1zka

ad1zka Author Team

Hi kjccc1993, // Do you use React hooks o classes based components? In theme you can find both of them as examples. Common part (99%) are bases on hooks.

// It comes with a landing page? We don’t have landing in React theme.

Regards, Keenthemes support

riterix

riterix Purchased

Landing Page guys, Landing page ;)

stay safe.

Thank you.

Hi :),

Sure, this will be definitely added soon! Thanks for staying in touch!

Regards, Sean

Pre Sales Question: How hard is this to install on a server to make mods?

Hi,

If you meant how to install and use Metronic in your server then please note that Metronic does not require any server side installation. You will need to the Metronic build tools in your development environment and when deploy your site to server you only deploy the compiled assets.

If you need any further clarifications please let us know.

Regards, Sean

when there will be next release? we’are waiting for more functional react version please :((( have a nice day

Hi :),

Expect it sometime tomorrow!

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

Regards, Sean

aio193

aio193 Purchased

hi, for the base HTML_table. why does the last column hidden? what should i do to make sure all columns are displayed?

PixelDots

PixelDots Author Team

HI,

You can use this setting to disable the “details” mode. rows: {autoHide: false}

Sorry for the inconvenience. We noted on this issue and will improve it in the future updates.

Let us know if you need further clarifications.

Thanks

NICEDU

NICEDU Purchased

i have licance of matronic but can’t use. How can i use it in ASP.Net Blazor or How can get its working html file. cant use matronic till now. Does author can help?

NICEDU

NICEDU Purchased

ok will send that thanks. Is there is any way to use/integrate it with ASP.Net Core Blazor

Hi,

At the moment we do not have .NET integration guide. But you can check our PHP integration guide to have some idea how it can be used with server side code:

https://www.youtube.com/watch?v=yu0O2Y2NXxc&feature=emb_title

Regards, Sean

I am trying to create a search page using “angular instant search” components from algolia. When I select an item to refine the search, the other components in the page are not updated. But if I click again the same item, it renders the last state of the search. The same components work fine in angular project without metronic theme. It seems to exist some issue blocking components rendering. Any idea what might be the problem?

ad1zka

ad1zka Author Team

Hi fabiozarvos,

Looks like you have the ChangeDetection issue.

Try to follow the doc: https://alligator.io/angular/change-detection-strategy/ For increasing performance in Metronic Angular we choosed ChangeDetection Strategy OnPush.

In your case, in constructor add param private ‘cd: ChangeDetectorRef’, then in your subrscribe result call ‘this.cd.detectChanges();’

Regards, Keenthemes support

Hi,

What do you mean when you wrote above “If you need the classic version we can provide a link to download it.”? How does the classic version differ from webpack / gulp version? I’m having trouble with the webpack/gulp setup (never having worked with these tools before), and am wondering if the classic version would be easier for me to work with.

On a related note—I completed steps 1-7 on https://keenthemes.com/metronic/?page=docs&section=webpack-quick-start, but get an error when I try to complete step 8, see:
$ npm run localhost
bash: fork: Cannot allocate memory
Please advise. Thank you!
PixelDots

PixelDots Author Team

Hi,

If you do not want to install the build tools you can use the classic version. Please send an email to support@keenthemes.com with your purchase code. We will send you the download link.

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