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

I use the Admin3 layout. When showing data in a table with only a few rows, the footer appears half way up the screen i.e. directly under the table and not at the bottom of the page. Can I force the footer to be always at the bottom of the browser window?

Actually, the behaviour seems variable depending on the initial display of the table or whether the page controls are used at the bottom of a table. Sometimes the footer is half-way up the screen, sometimes it is off the screen despite only a small number of rows being displayed.

Hi,

By right Metronic auto adjusts the content height and footer position. You can see it here: http://www.keenthemes.com/preview/metronic/theme/templates/admin3/layout_blank_page.html

If you are having any issue with that please provide us a test link to your developing site. We will need to check your code in order to advise you further.

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

Thanks.

I dynamically replace the frontend template’s shopping cart DOM block with HTML received (via ajax) from the backend server using jquery’s $.html() function. Of course the slimscroll handlers are no longer active on the new DOM elements.

I persume I need to re-instate the slimscroll handlers somehow. The only way I can see to do this is to, again call (it is called initially on document ready):
Layout.init();
which seems like a very heavy-handed approach. Is there a simpler, gentler way I should be doing this?

Hi :),

You can add below public function right after ‘init’ function in layout.js script and call Layout.initScrollers() instead:

        initScrollers: function() {
            handleScrollers();
        },

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

Thanks.

Hello. I have went through your theme and I think it is one of the best. Please is it possible to integrate payment gateways into this theme. I very much interested in the commerce aspect of the theme. Is it possible to include other shipping carriers on the theme like FedEx, UPS, DHL etc. Finally I want to know if this theme works with wordpress. I will love it to work with wordpress.

Hi :),

Thanks or your interest in Metronic.

Metronic is not compatible with Wordpress. Metronic is an abstract HTML theme(only HTML, JS, CSS) and it does not cover the backend implementation(e.g: shipping carriers, etc).

If you need any further clarifications please let us know.

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

Thanks.

Hi,

As you can see it works fine in the original theme: http://www.keenthemes.com/preview/metronic/theme/templates/admin2/layout_fluid_page.html

Could you please try to run it from a web server(localhost, or hosting) instead of opening directly from file. Also please provide us some screenshots of your browser console to make sure you don’t have any JS error in your page.

Thanks.

Hi,

I would like to know if the pictures in one page theme are free to use? What is the source of the images?

Thanks.

Hi :),

Yes, those images are free. You can email our support(support@keenthemes.com) to get the source of those images.

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

Thanks.

what is ETA for next Update

Hi,

It should be out in a few weeks.

Thanks.

Hello, i bought the theme. Is there any way to simply connect some standard statistic from google analytics?

Thanks and keep up the good work!

Hi :),

Thanks for your feedback. This feature is not implemented in Metronic yet. But we will consider it in a future releases. To work with GA you can check below google article: https://developers.google.com/analytics/solutions/articles/gdataAnalyticsCharts

If we can assist you with anything else please let us know. To stay updated please follow us on http://twitter.com/keenthemes ;)

Thanks.

Hi, I’m trying to figure out how to display a modal when a portlet is in fullscreen mode. The example on your preview page won’t wok: see http://www.keenthemes.com/preview/metronic/theme/templates/admin/portlet_general2.html. Select the ‘Tools’ portlet -> fullscreen -> settings icon.

Also, if I have a datatable in the portlet with the select2 component (for selecting the number of rows as per your examples) and then fullscreen the portlet, the combobox will no longer work. Any advice? Thanks

Hi :),

Thanks fo reporting those issues. We will fix them in the next update very soon.

For a hot fix you can follow below steps:

1) Add below css code in custom.css

.page-portlet-fullscreen .modal {
     z-index: 10080; 
}

.page-portlet-fullscreen .modal-backdrop { 
     z-index: 10079; 
}

2) Add below code in custom.css:

.modal-open.page-portlet-fullscreen .select2-drop-mask {
    z-index: 10081;
}

.modal-open.page-portlet-fullscreen .select2-drop {
    z-index: 10082;
}

.modal-open.page-portlet-fullscreen .select2-search {
    z-index: 10083;
}

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

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

Thanks.

Hi Keen;

How use to footer-fixed in fluid stye ?

Hi;

Admin theme 2 ‘page footer fixed’ note working fluid layout :(

Admin theme 2 content issue apply footer fixed

Hi :),

Please refer to the preset fluid layout template here: http://www.keenthemes.com/preview/metronic/theme/templates/admin2/layout_fluid_page.html

In this template you just need to apply ‘page-footer-fixed’ class to the body element it should work. If you need any further clarifications please contact our support at support@keenthemes.com

Thanks.

How is it possible to use extended modal and bootbox on the same site?

The CSS is not working well if we use boths css/js on same site.

Hi :),

Unfortunately you can’t use those plugins together due to known conflict. But you can use bootbox with native bootstrap modals.

Thanks.

Hi keenthemes, i’m already your follower in Twitter :) Have you in progress some updates in ecommerce view? For example: 1) Full width page… 2) Filter product masonry or similar

Thanks a lot Mattia

Hi :),

Not at the moment. But we will consider it in a future releases.

Thanks.

Please include mega menu in admin4 template..please dont tell we think in future release..i waiting for that…

what is ETA for next Update

Hi :),

Noted. We will consider it.

Thanks.

how you add component or elements into new blank page?

Hi :),

You will need to extract HTML code from the demo templates and place in the blank page template. If you are working with plugins then make sure you included required js and css files. For more info you can follow the documentation(‘_documentation/admin/index.html’).

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

Thanks.

AngularJS and Amcharts are not working. Help!

Hi :),

Can you please contact our support(support@keenthemes.com) and provide a test link to your developing site. We will need to check your site and inspect your code in order to assist you further. For more info you can check amchart’s official documentation here: http://www.amcharts.com/

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

Thanks.

Hi,

I’ve just updated the theme files but has caused a few issues with the layouts on certain pages.

I updated from the July version to latest 3-Feb update, so not sure if I’ve skipped some files. Any help would be appreciated.

Screenshot:

Hi :),

Can you please contact our support(support@keenthemes.com) and provide a test link to your developing site. We will need to check your site and inspect your code in order to assist you further. In the main time you can try to double check your code and make sure you updates the related HTML code with the latest version.

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

Thanks.

How can I change the position of Metronic.alert()? In other words, how can I change where the alert is positioned on the page? Right now, it seems to appear below the “page-bar” DIV.

I’d like to move it closer to the menu bar at the top.

Thanks!

Hi :),

You can use ‘container’ parameter to set alert container as explained below:

Metronic.alert({
    container: "#some_element", // alerts parent container(by default placed after the page breadcrumbs)
    place: "append", // "append" or "prepend" in container 
    type: 'success', // alert's type
    message: "", // 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: "" // put icon before the message
})

If you need any further assistance please let us know.

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

Thanks.

I cannot seem to change the color (class) of the confirmation buttons when using the data-toggle=”confirmation” setting. No matter what I set the classes to, it appears the OK button is using btn-success and the Cancel button is using btn-danger. Here’s my code:

<button type=”submit” class=”btn btn-sm red-thunderbird” data-toggle=”confirmation” data-placement=”bottom” data-btn-ok-label=”Yes” data-btn-cancel-label=”Cancel” data-btn-ok-class=”green” data-btn-cancel-class=”red-thunderbird” data-original-title=”Are you sure?”> Delete</button>

Thanks!

Hi :),

Thanks for reporting this issue. We will fix it in the next update very soon. In the main time you can use below fix:

1) Go to metronic.js and update handleBootstrapConfirmation as shown below:

    // Handles Bootstrap confirmations
    var handleBootstrapConfirmation = function() {
        if (!$().confirmation) {
            return;
        }
        $('[data-toggle=confirmation]').each(function() {
            $(this).confirmation({ 
                container: 'body', 
                btnOkClass: $(this).attr('data-btn-ok-class') ? $(this).attr('data-btn-ok-class') : 'btn-xs btn-success', 
                btnCancelClass: $(this).attr('data-btn-cancel-class')? $(this).attr('data-btn-cancel-class') : 'btn-xs btn-danger'
            });
        });
    }

2) In HTML you can use below markup:

<button class="btn btn-success" data-toggle="confirmation" data-placement="right" data-btn-ok-label="Continue" data-btn-ok-icon="icon-like" data-btn-ok-class="btn btn-sm yellow" data-btn-cancel-label="Stoooop!" data-btn-cancel-icon="icon-close" data-btn-cancel-class="btn btn-sm btn-danger">Action confirmation!</button>

I hope the above fix will be helpful.

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

Thanks.

Hey – thanks much. That fix now allows me to set the class for each button. However, the data-popout=”true” (click anywhere to close) feature seems to not work after making this change. That’s not as critical as the class issue was, but wanted to let you know.

Hi :),

It seems this issue is caused if you initialize the confirmation element individually(e.g: in the previous code). As a workaround you can use below code:

    var handleBootstrapConfirmation = function() {
        if (!$().confirmation) {
            return;
        }
        $('[data-toggle=confirmation]').confirmation({ container: 'body'});
    }

And pass the button classes through HTML attributes instead of JS initialization.

Thanks.

Is it possible to have modal form and inside modal form to call another modal form. Imagine like a Customer form that loads modal on top and when you click Add Address button it will create a smaller modal on top of the existing modal that will allow me to edit the address. Is that possible?

Hi :),

Yes, that can be possible. You can check stacked modals examples here: http://www.keenthemes.com/preview/metronic/theme/templates/admin/ui_modals.html. Also you can check the documentation here: getbootstrap.com/javascript/#modals

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

Thanks.

Hello,

we have one issue with Metronic with the left menu. If there are too many items the scroller is not working right, so we can’t get to the bottom of the menu.

Here is the screenshoot: https://dl.dropboxusercontent.com/u/1243701/Screen%20Shot%202015-02-12%20at%2017.16.17.jpeg

Hi :),

Thanks for your feedback. Can you provide us a test link to your site ? We will need to check your actual code in order to give any further advice. Can you email our support(support@keenthemes.com) the details ?

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

Thanks.

Hello,

When i want to use custom dropdowns (select2) with an ajax load native modal page, it doesn’t seems to work. It is ok with the base page ( i load necessary css and js files ).

Thanks

Hi :),

You will need to initialize select2 element on content load. You can call Metronic.initAjax() on your ajax content load(you can call it on jquery document ready event in the bottom of your ajax content).

If you need any further clarifications please let us know.

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

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