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.

Hi Keenthees,

1) Any chance to get more Invoice templates in the next update ?

2) After ups un downs, I realise it has to be a Landing page, any thoughts on this, for the next update ?, I mean

NB : I believe that you got one named ‘Jango’, saw it few months before, seems out-dated little bit and huge, I’m saying just a lading page for front-end.

Stay safe guys ;)

Thank you.

Hi :),

Sure, we will check this further and attend. Probably we come up with a hybrid style landing page that can use all admin features plus some frontend like blocks.

Regards, Sean

You rocks guys,

Hopefully in the next big update.

Thank you soooooooooooooooo much.

Take care and stay safe.

Sure, the same to you! :) Thanks

I bought Metronic two years ago, when I downloaded it few days ago and run the project the HTML appears without any css. It shows me the texts and the images without any styles. Regards

Hi Envato,

First of all thanks for choosing Metronic.

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

Hello, I’m using Metronic 6.1.8 but in folders have no css folder (using them default)

Hi,

First of all thanks for choosing Metronic.

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

PS: If you need the classic version with precompiled assets please contact our support at support@keenthemes.com and provide your purchase code so we can send you a download link.

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

Regards, Sean

installed exactly as suggested for laravel using webpack. datatables.net doesn’t work, and select2 isn’t styled right. uninstalled/reinstalled a few times now. still didn’t work.

then i finally caved and built using webpack “Webpack Quick Start” as described in the docs and copied all the dist files over to laravel which produced the desired result. something is wrong in this workflow.

any idea why the laravel installation as outlined in the docs doesn’t work?

evici Author Team

Hi afagard.

You would need to include plugin in to your app.js or build as separate set of assets to be loaded per page basis. What you need to pay attention to is /demo1/tools/webpack/scripts.js – here you can see that datatables can be loaded using lines 21-23. Just copy them and add to your buildable js file. Please pay attention to where path leads – you would need to edit path to script where it is actually placed. This way you can load other plugins and features – just browse around the package – and you’ll be surprised how fun it is. Happy coding.

Regards, Mind

i need help about using sweetalert and toastr with php . can you contact me about it . markmfdmorton@gmail.com

Hi,

You can refer to the plugin’s official documentation here https://github.com/CodeSeven/toastr and follow the examples https://codeseven.github.io/toastr/demo.html

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

Regards, Sean

Hi,

Could you please clarify what do you mean by “collapse animation”?

Thanks

Hey,

I was exploring this template

We are planning to use this react version but you don’t have much ready-made apps in reacts but you have HTML version. So can we buy this and convert HTML components into react components in small steps without spending much time?

Hi yugendhar_devale,

All css-classes from HTML version are imported into react too. You can move html code your own (need copy html structure) and all styles will be applied automatically.

Actually we don’t move many apps from HTML version because they are based on jQuery which isn’t allowed in React.

Regards, Keenthemes support

Hello, I’m using Metronic 6.1.8 demo3 , how can i scrool the aside menu , I gave it a try on css , it scrools but the tooltip submenu show inside, please help me…

Hi :),

Since this demo uses fixed aside with dropdown submenu mode it can not be scrolled since scroll mode uses overflow:hidden which conflicts with Dropdown submenu mode. Only available option is to use scrollable aside with accordion submenu as you can try with the layout builder by setting up aside menu’s submenu to accordion mode.

https://keenthemes.com/metronic/preview/demo3/builder.html 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

Hi, I want to reload same KTDatatable with the new set of data and columns without changing other options. How do I do that?

Hi,

You have to destroy current init datatable and reinitialize it with a new modified options. You can keep the datatable options in a variable, then you can reuse it.

Please check here, this seems a good example for that. https://gist.github.com/KeenthemesHub/173b6ffd772ddecf39930fcfda657af1

Sorry for the incovenience. We will consider improving this feature to be able to update the options without destroying it first.

Thanks

When the new demos will be available?

Hi :),

Thanks for your feedback. Expect them in a few weeks. We are working hard to release them as soon as possible.

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, I am using metronic version v5. My question is that I want black and white theme support in my website, Like black and white theme in the website like many website have. So plz let me know the convenient way to do this.

Hi,

Thanks for your feedback.

Our themes are provided only in default skin(white background and dark font). If you need dark skin you will need to create it by your own. For more info about our support policy please kindly check https://keenthemes.com/theme-support/

Regards, Sean

How do you change the font color for Material Input fields on angular? I’ve changed the primary color already. However the material input fields font is blue the old primary color. The material select field colors are black. I want to change the font colors to black globally. I’m not talking about Placeholder text color btw.

The regular form fields (not Material) already has black text globally, however I want to use Angular material format. I check this forum and the SASS files but couldn’t find the setting.

Thank you!

Ok will look into the SO recommendation. Thanks for the fast response!

Hi I may have found the issue. If you look even in the angular version of demo 1 the default text color is not black but a lighter blue. The html demo version has black font as the default.

In the scss file ‘_config.scss’ there’s this section:

// General Link Settings $kt-font-color: ( text: #646c9a, link: ( default: kt-state-color(brand), hover: darken(kt-state-color(brand), 6%) ) ) !default;

Maybe the font color for links were accidentally set as the default text color for the whole theme under ’$kt-font-color’. When I changed this color to black it worked fine and the default font color changed to black across the theme.

Hi aparkertg,

It wasn’t set accidently, cause whole sass setup in angular were moved from default(jquery) version without changes.

Actually _config.scss file was prepared for users cusom configurations.

Regards, Keenthemes support

hi metronic team, exist a way to show live changes without open the file and recharge again ? i means change some style and the web browser recharge it self mmm exist that way on metronic ? demo doesnt show it

Hi,

You can use “gulp watch” to auto compile when you have modified any assets files in src. But you still have to reload the browser.

Thanks

Hei I use laravel integration but datatable.net vendor not compliled. How can compliled the vendor?

evici Author Team

You should include scripts as such in your app.js

require(“demo1/src/assets/js/global/components/base/datatable/core.datatable”); require(“demo/src/assets/js/global/components/base/datatable/datatable.checkbox”);

and RTL version if needed require(“demo/src/assets/js/global/components/base/datatable/datatable.rtl”);

And then compile. Please ensure the path to scripts matches your source location

In the development mode, my react app is perfect. When i run the app in the production mode, page will redirect to http://localhost:5000/error/error-v1 after login. Please help! Sorry for my bad English.

Hi cuongpv219.

You should setup ‘serve.json’ and ‘package.json’ first. If you want serve your prod on http://localhost:5000/ settings should be like these:

1) serve.json:

"public": "build",
"redirects": [
  {
    "source": "/",
    "destination": "/" 
  }
],
"rewrites": [
  {
    "source": "/",
    "destination": "/index.html" 
  }
]

2) package.json:

"homepage": "http://localhost:5000",
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "lint": "eslint src",
  "format": "prettier --write \"src//*.{js,css,scss,html}\"",
  "rtl": "webpack" 
},

3) run ‘npm run build’ 4) run ‘serve -s build’

Regards, Keenthemes support

Hi, How to put dyname name and value inside this column checkbox field

columns: [
{
    field: 'checkbox',
    sortable: false,
    width: 20,
    type: 'number',
    selector: { class: 'kt-checkbox--solid' },
    textAlign: 'center',
    template
}

Hi,

Sorry for the inconvenience. At the moment, the checkbox value cannnot be modified. It takes the value from the data. We will consider adding it in the future updates.

Thanks

Thanks for reply, But how can be insert name attribute?

Hi,

Sorry for the delay. Current datatable options does not allow it. Any attribute cannot be added. As workaround, you can this a bit of modification.

/theme/default/demo1/src/assets/js/global/components/base/datatable/core.datatable.js at line 754

append($('<input/>').attr('type', 'checkbox').attr('value', value).attr('name', field).on('click', function() {

Thanks

Solved.

Hi,

Glad it worked. Please let us know if you need further help.

Thanks

I recently purchased this theme. I have the quick search working returning data but I noticed the scroll bar is displayed beneath the results on the left instead along the right side as in the demo. I’m not sure why the left side, I am not using RTL

I have not applied any markup to the demo and have even left the html markup with no data and the behavior is the same.

Any suggestions?

I am using the HTML version of Demo4 version 6.1.8 with the repo that I downloaded late last week. Before trying the clean Angular version, I tried a clean version of the HTML and it appears to be working correctly.

I used the layout builder with the partial pages to build what I currently have so I am not sure if I made a mistake or what.

I found the issue. It was with a css declaration in my head. I’m trying only to use what I need (I wish the css and js for the plugins was not bundled) and in choosing what to use and what not, I entered a path incorrectly.

Hi,

Glad it you found the solution for it. Let us know if you need further help.

Thanks

Hi, In the List, there is an overlapping between the icon and the text in “Timeline List with icons” https://keenthemes.com/metronic/preview/demo1/components/custom/lists.html

Hi :),

Thanks for the heads up. We will check this further and fix it in the next update very soon.

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

Html version not works anyway

Some css files are missing. in download package.

Please add all necessary files to download files. i dont want to install my server npm node any other thinks. I want to use html version of your template and cant use. We are unnecessary baffling to use your template. Why? You can keep these versiona also. But please dont touch to simplified html-css-js version. Still two days i cant start to use your product.

Hi ,

First of all thanks for choosing Metronic. Sorry for the late reply.

Please note that the classic version(with precompiled assets) was excluded from the package due to the theme file size limit. However we can provide the classic link on request. Please contact our support at support@keenthemes.com and provide your purchase key.

In order to launch the buildable version of 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

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