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,084 sales
Recently Updated
Well Documented

keenthemes supports this item

Supported

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

12220 comments found.

Hello, can you please provide more specific documentation for “Metronic’s API for Bootstrap Alerts” in your documentation refer to some files that doesnt exist in the folder i downloaded from themeforest, i want to show a notification and autoclose it after some seconds… but i can get how it workds, you made some inputs and some options and a button to run the notification at the top, but how… you don;t explain this, please write a documentation to how to do this… Thanks.

Hi :),

Thanks for your feedback. Noted. We will definitely include it in the doc. In the main time you can just call below API function whenever you need:

Metronic.alert({
     container: "#some_element", // alerts parent container or you can skip this option so the alert will appear after page breadcrumbs 
     place: 'append', // append or prepent in container 
     type: 'success',  // bootstrap state classes
     message: 'Successfully done!!!',  // alert's message
     close: true, // make alert closable
     reset: true, // close all previouse alerts first
     focus: true, // auto scroll to the alert after shown
     closeInSeconds: 0, // auto close after defined seconds
     icon: 'fa-check' // put font awesome icon before the message
});

If you need any further clarifications please let us know. To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi there! I added a Bootstrap switch to the actions div of a portlet. I’m trying to essentially use it to toggle collapsing/expanding the portlet, based on whether it is “checked” or not.

In Javascript I have:

var handlePortlets = function() { $('#PageContent_hotelStay1').click(function () { if (this.checked) { ShowHotel(); } else { HideHotel(); } }); } function ShowHotel() { var portletBody = $('#hotelPortlet .portlet-body'); portletBody.slideDown(200); // open } function HideHotel() { var portletBody = $('#hotelPortlet .portlet-body'); portletBody.slideUp(200); // close } And in the HTML I have the “hotelPortlet” ID tag on the <div class="portlet box blue"> However, it is not working. I tried to move the ID to the portlet-body form DIV, still no luck. Any suggestions? Thanks!</div>

Hi :),

Please try to update your code as shown below:

 var handlePortlets = function() {

        $('#PageContent_hotelStay1').click(function () {
            if ($(this).attr('checked') {
                alert('test1');
                ShowHotel();
            } else {
                alert('test2');
                HideHotel();
            }
        });
    }

If you need any further assistance please provide a test link to your developing site to our support at support@keenthemes.com

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi there,

Thanks for your awesome work on the themes! We will be using the Angular versions of your work and are pretty happy that so much work has already been done. And that for such a low price!

So we are wondering if there is a roadmap that might involve Angular 2 and AtScript (or Dart)? Do you plan to rewrite your examples or will you stay with the 1.x branch?

with kind regards.

Hi :),

Thanks for your feedback. Most likely we will rewrite it since Angular2 will be totally rewritten. However we will finalize that decision once Angular2 is released.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi Keenthemes, i’ve a problem with homepage of corporate template… When i check it with Firebug it told me this message:Metronic.init(); ReferenceError: Metronic is not defined – Metronic.init();

Why? In which .js file is it defined?

Thanks Mattia

Hi :),

Thanks for reporting this issue. We will fix it in the next update which we are planning to release in by next week.

In the main time you can just remove ‘Metronic.init();’ call in the bottom of your page and everything will work fine.

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

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

We are using admin4 and discovered that the slide down/up animation of sidebar>ul>li>ul open/close looks different (worse) when the sidebar is fixed. Reproduce: open a sidebar parent ul once with default (not fixed) sidebar and once with fixed sidebar and note the different.

Is this fixable?

Hi :)

Thanks for your feedback.

For the fixed sidebar mode we used Slimscroll plugin the scrolling effect can be slightly different from browser’s original sliding effect. However this is a major issue but we will check it further to improve it.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

what is the best way to integrate Jqwidgets tool in your template without losing the responsiveness?

Thanks,

Hi :),

Jqwidgets has a separate mobile version so you can switch to mobile version based on device.

Thanks.

Hello.

I can’t see tabletools in my table.

I put asset and sass directories at the same level of my html pages, follow I set the value of sSwfPath to ”/assets/global/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf” ( I trie too many cobinations of paths ).

My Page is based in “TableAdvance,html” example but i can’t see the ToolBar

Can you give some help please?

Hi :),

Can you check your browser console if there is any error ? If you need our further assistance can you deploy your site to your test server and provide us a link so we can check your code online and advise you further. Otherwise we will not be able to predict your issue effectively.

You can send further details to our support at support@keenthemes.com

Thanks.

I am using advanced tables with datatools but would like the table header row to be in the theme colour. How may I do this? The header row is controlled by JavaScript and I am no JavaScript expert! Thanks.

Hi :),

Could you please provide more details ? Do you want to customize the color of the datatable header columns ? If yes, you can do it with CSS. No js is required. You will need to override the table header td in custom.css.

If you need any further assistance you can contact our support at support@keenthemes.com

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi,

Sorry for this again :(, i have panned to use admin2 angularjs vesion. in left side setting i have changed fluid width ect, how can i apply this with code permanently without setting icon :)

Thanks

Hi :),

You can refer to the preset fluid layout demo here: http://www.keenthemes.com/preview/metronic/theme/templates/admin2/layout_fluid_page.html. Referring to this page you can change the angularjs version’s header, page container and footer partials and use the fluid layout as default. The fluid and boxed layouts are quite similar so you just need to do some slight changes referring to layout_fluid_page.html template.

If you need any further assistance you can contact our support at support@keenthemes.com

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

I want to display an image in the form wizard with

<Iframe>
or any thing similar but I don’t want to lose responsiveness across different platforms? I used
<iframe>
but it isn’t responsive.

Hi :),

Thanks for your feedback. I would suggest you to not use iframe as it has some known issue in responsive mode. You should consider using inline images without loading them in iframe. If you could describe your requirements we could try to give you some suggestions.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

I am loading an (image and PDF) from the database and I want to display on form wizard tab

Hi Is there some straight forward way to implement the Login page so that the framework (header, nav bars footer etc) is all hidden? I’ve implemented the routing for login.html but it will load within the existing metronic framework which is not what i want

Also, I any ETA yet on release of the login angular update?

Also worth noting, i surprised the login screen was not released (or instructions given) on how to implement with angular. the skin is really hamstrung without a compatible login screen.

Thanks

btw, for now I’ve simply implemented the index page completely separate as a jquery / file for unknown routes in laravel. It then redirects to the angular “dashboard” upon login. but I’m unsure how I can handle registration, password reset and login. Would I forward requests to angular and have the controller handle then redirect BACK to the jquery login/register/reset page? its already sounding very messy

Ok i ended up just creating a separate angular app to do the login/reset/register. I’ll probably post a solution on here once a demo is done

Hi :),

That’s correct. The login and after login pages should be separated that way. We will consider releasing the login page integrating asap but at the moment we can’t let you know the ETA. Good luck with your project :)

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hello,

This is compatible in OPENCART v2.0.1.1 and the admin template is beautiful! Thank you.

Regards, Pesowon

Hi :),

Thanks for your feedback. Metronic is an abstract HTML theme(HTML, JS, CSS) and its not compatible with Opencart. But you can develop an opencart theme using Metronic templates. But opencart is not in the scope of Metronic.

If you need any further clarifications please let us know.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

This is by far the best admin template on the planet. PLUS some really great extras thrown in.

You deserve all the sales you are getting.

Well done!

Many thanks for your warm feedback. Really appreciate that :)

Hi Keenthemes,

How to use the angularjs scripts? I do not find any documentation.

Thanks.

Hi :),

Thanks for your feedback. If you refer to admin/angularjs/js/app.js main script you can find the code comments to create a new route, pages and define lazy load js/css files for each page. For more info you can check AngularJS official doc here: angularjs.org

For the URL routing you can check: https://github.com/angular-ui/ui-router and for the lazy loading https://github.com/ocombe/ocLazyLoad

if you need any further clarification please contact our support at support@keenthemes.com.

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi,

i would like to use admin2 dashboard theme, i want use default fluid width when run my localhost. were i change this.

Thanks

Hi :),

You can refer to fluid page template example here: http://www.keenthemes.com/preview/metronic/theme/templates/admin2/layout_fluid_page.html

If you need any further assistance please let us know. To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi, I want remove the grey area on the side of metronic template 2 (see the screenshot): http://d.pr/i/1j3Bf/4EtgKu8S

How do I do? I want the template in fullscreen. Thanks

Hi :),

You can use the fluid layout as shown here: http://www.keenthemes.com/preview/metronic/theme/templates/admin2/layout_fluid_page.html. So just refer to layout_fluid_page.html template in your downloaded Metronic package.

If you need any further clarifications please let us know. To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hello, Can i use light table style on “responsive table with expandable details” ? Thanks in advance.

Hi :)

Yes, just try to apple ‘table-light’ class to your table. If you need any further assistance please contact our support at support@keenthemes.com

To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hello Everybody,

I would like to deploy my metronic site onto github page hosting. Have anybody done this before ?

Thanks in advance.

cheers Jeangui

Hi :),

You can try this one: https://cdnjs.com/

Thanks.

thanks

You are welcome :)

Dear KeenThemes team,

I am trying to integrate the flotChart portlet in the AngularJS enabled template. I have a lean and mean setup of the template and am simply trying to show a portlet with the Graph10 donut chart from charts_flotcharts.html file.

1. I (lazy)loaded the right jquery flotchart js files for the state (url) in app.js 2. I created a view (template) for the page (html snippet from charts_flotcharts.html) 3. I created a controller for this page, which invokes these initialization functions :

Metronic.init();    // init metronic core components
ChartsFlotcharts.init();
ChartsFlotcharts.initCharts();
ChartsFlotcharts.initPieCharts();
ChartsFlotcharts.initBarCharts();

When I load the page, I notice a inconsistent loading of the chart. Sometimes it loads, other times it does not. Looking at the console of the browser, it reports $.plot is undefined.

Since this variable is set within jquery.flot.js (ln 3144) I assume that other javascript (flot related) files are trying to use $.plot before it is succesfully initialized and set. Furthermore, I subscribed to the ocLazyLoad.fileLoaded event to track the loading order. I noticed the files are not always loaded in the same order.

$rootScope.$on('ocLazyLoad.fileLoaded', function (e, file) {
    console.log('fileLoaded file : ', file);
});

But even if the file is loaded, maybe $.plot is not interpreted and set yet.. so all in all I really think having a race condition wherein the javascript files and initialization is not loaded / handled in proper order.

Could you please direct me in the right direction, getting a simple jquery.flot portlet from the jQuery template to run properly under the AngularJS version of the template?

Since you noted “All Metronic features from the HTML version(pages, layout options, components, plugins, etc) are fully compatible in the AngularJS version.” -> This shouldn’t be that hard I think.

Thanks in advance! Greetings, Gerrit-Jan

Hi :),

You should load jquery flot plugin related js files in a single js file. If you load them separately the loading order can be different based on HTTP response for each js file. So you can use belo

‘assets/global/plugins/flot/jquery.flot.all.min.js

If you need to include other jquery flot extensions you can just append them in the above main js file.

If you need any further assistance please let us know. To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi KeenThemer :) ,

Thank you for the feedback. Only to supplement your suggestion; the jquery.flot.all.min.js file does not contain the minimized version of the pie extension. To use the pie charts succesfully, you should add the code from file ‘jquery.flot.pie.min.js’ to the end of file ‘jquery.flot.all.min.js’ ..

If you have a better alternative, please let me know.

Greetings, Gerrit-Jan

Hi :),

Yes, the plugin has a lot of extensions so you can include then on demand. For the angularjs usage this is only solution(loading all dependent js files in a single master file). Good luck with your project!

Thanks.

I like the advanced datatables with the paging of rows and the search box but I don’t want the PDF, CSV, Excel and Print buttons. How may I turn these off?

Hi,

Please try to remove the tabletools extension js file:

<script type="text/javascript" src="../../assets/global/plugins/datatables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
/pre>

If you need our further assistance please send our support(support@keenthemes.com) a test link to your developing site. Otherwise it will be hard to predict your issue.

Thanks.

That removes the buttons but also removes the Search filter and the paging options. I want the features of the tabletools extension except for those buttons which I don’t need and for which I want to use that part of the screen for my own buttons.

Hi,

Can you provide us a test link to your developing site ? We will need to check your page and its actual code in order to advise you further. You can send the details to our support at support@keenthemes.com

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