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

How can reduce the size of style.bundle.css? I was able to reduce sizes of vendor.bundle.js and vendor.bundle.css to ~400KB by removing unused plugins from default.json but style.bundle.css is still around 1.84MB which is too much. What can I do to reduce its size?

Hi :),

You can exclude unused components stylesheets from “src\sass\framework\components\general\_include.scss”. But you should exclude them more carefully since some components are used by other components that you might use. However ~2mb css files size is not a big deal nowadays. Plugin gzip compressors in your server ca reduce the file sizes up to 50-60%. If you need more info please let us know.

Thanks.

When is the RTL version, you have said that it will be at the end of December, and so far we are waiting.

Thanks.

Hi :),

We haven’t announced the release date for the RTL. All we said was to consider in the near future. However we do have plans for the RTL version and but at the moment we can’t give an accurate timeline.

Thanks.

Hello Keenthemes, https://imgur.com/a/mNBkq <- the right side not looking good as the left side under accordions

We just double checked it on Mac with Firefox, Chrome and Safari everything looked well. Maybe you accidentally zoomed out the page or it was due to your browser cache since after each update its recommended to update browser cache to browse the preview site.

ah must be that, I didn’t cleared my cache, was just informing what i saw, thanks

Noted, never mind, It can happen to the best of us :)

Hi support, I’m using JSON Datatable! I would like to know how I control the “rows” height inside the datatable? when I have a large number of text, it will extend the hight of the table automatically, picture attached. https://ibb.co/n7W31m I want to disable this feature and force fixed row hight. Thanks

Hi,

Please note that the row/cell height is automatically set according to the text within the fixed width. Disabling this auto height will not work since it uses the min height that required to display particular text. if you need any further clarifications please let us know.

Thanks

Hi Thanks for your help, I will try to find a way to disable it. is there a way to enable vertical scrolling only and disable horizontal scrolling? I only found one option to enable both scrollings at the same time (vertical and horizontal). “scrollY” and “scrollX” settings doesn’t work : /

Hi,

You cannot disable the horizontal scroll. It will automatically appear if your mDatatable columns have horizontally overflow. Try to reduce the column’s number or width, the horizontal scroll should be gone. If you have wide width datatable you can consider using styled custom scrollbars as shown here: http://keenthemes.com/metronic/preview/?page=components/datatables/scrolling/both&demo=default

Thanks

we love the theme, however, it would be nice to see you guys develop out some common page examples and widgets vs more navigation layout options. Orders, invoices, calendar, etc etc. Any plans for this?

Hi :),

Sure, we will add these pages in the next update. They are in progress.

Thanks.

That’s great news, thank you!!

You are welcome :) Thanks.

I found bug on profile page: https://keenthemes.com/metronic/preview/?page=profile&demo=demo7 . Try add something to tab_2 or tab_3. then reload page. All data is displayed on first tab.

Hi :),

Actually this is not a bug. You just need to refer to the bootstrap tab documentation in order to link tabs to their contents properly: http://getbootstrap.com/docs/4.0/components/navs/

Thanks.

To whom this may concern, First of all thank you for the product you provided me. I bought your metronic theme in the day. I did not buy it to use all of this theme, I just want to use the some parts. Thıs parts : form wızard, form repeater and tabbed portlets.

When I use all of your JavaScripts and CSS, they are breaks my previous design. Could you please send me only parts of css and javascript that I want with seperate files. (for default template)

Thıs parts : form wızard, form repeater and tabbed portlets. Thank you from now

Hi,

Metronic is a framework that has elements and components that all work on the same foundation(global helper classes, base elements, etc). Extracting certain features upon request is not covered by our support since users purchas the theme as it is and we can provide components separately upon users requests as this will take a lot time. For example to extract the tabbed feature we will need to extract the bootstrap’s tab component(with its own JS and CSS code) also metronic’s base and tabbed portlet components. Plus we need to include all the global helper class used by this feature. As you see these whole process is a quite time consuming which is not covered by our support policy.

Thanks.

I have made a custom filter for datatable. But when I click on filter, I want to appear the loading (the one that shows on datatable load). How can I do that?

$(’.filter-submit’).on(‘click’, function() { // shortcode to datatable.getDataSourceParam(‘query’); var query = datatable.getDataSourceQuery(); query.Filter = $(”#filter”).serializeArray(); // shortcode to datatable.setDataSourceParam(‘query’, query); datatable.setDataSourceQuery(query); datatable.load(); }).val(typeof query.Filter !== ‘undefined’ ? query.Filter : ’’);

Hi,

You can call the internal method to call the loading spinner using datatable instance:

datatable.spinnerCallback(true);

$('.filter-submit').on('click', function() {
   datatable.spinnerCallback(true);

   var query = datatable.getDataSourceQuery();
   query.Filter = $('#filter').serializeArray();
   datatable.setDataSourceQuery(query);
   datatable.load();
});

Thanks

It works, thank you. But can I arrange the spinner in the top, not in the middle of the div?

Great! You are welcome. At the moment the spinner’s top alignment is not supported as configurable option. We will enable it in the next update. Thanks.

In all tables miss data http://prntscr.com/hyjkai Only in first local Data. Can you help me by give a little advice how to see data in other menu?

Hi,

You should launch the template from your local webserver. If you launch them in offline mode(directly from HTML file) the ajax datatable demos do not work. Please refer to the documentation for any further info.

If you need any further support please contact our support at support@keenthemes.com and provide you purchase key.

Thanks.

Does the documentation contains a chapter on how to add custom JS or CSS? Could you also add an example on how to load a remote URL into a modal window please? I struggled for 3 hours until I discovered that upon BS3+ you have to load the content manually :) I did it this way:
$('body').on('show.bs.modal', '#generalmodal', function (e) {
        $(this).find(".modal-content").html('<div class="m-loader m-loader--primary" style="width: 30px; display: inline-block;" /> Searching, please wait...');
        $(this).find('.modal-content').load(e.relatedTarget.href);
    });
generalmodal is the id of my div. Maybe you have a better solution… Regards Andrea

Hi :),

Thanks for your feedback. We are going to publish a video tutorial for this and other important topics. In the meantime please follow below steps.

Using the build system you can add 2 types of custom code for js and sass: global and custom.

JS:

1) To add a global JS script for all demos and pages you can add it under “src/js/app/base/” folder, for example “src/js/app/base/myGlobalScript.js”. Thus all scripts added under this folder will be added into the application level bundle after yourun “gulp” task: “assets/demo/default/base/scripts.bundle.js”

2) To add a global JS script for your selected demo and all its pages(e.g: default demo) you can add any number of JS scripts under “src/js/demo/default/base/” folder, for example “src/js/demo/default/base/myDemoLevelGlobalScript.js”. Thus all scripts added under this folder will be added into the demo bundle after you run “gulp” task: “assets/demo/default/base/scripts.bundle.js”

3) To add a custom JS script(to include in a specific pages) you can create it under “src/js/demo/default/custom/” folder as “js/demo/default/custom/myLoginForm.js” and after you run “gulp” task this page will be minified and moved to “assets/demo/default/custom/myLoginForm.js”.

SASS/CSS:

To add a global CSS code via SASS you can add it through the main style.scss file of your selected demo. For example: “src\sass\demo\default\style.scss”. In this style.scss file you can include any custom scss file from any location. For example you can create a new folder “custom” under “src\sass\demo\default\” and add your custom scss partial files then you can include these files in index.scss and compile it with “gulp” task and your code will be added into the main layout bundle: ”/assets/demo/default/base/style.bundle.css”.

If you need any further clarification.

Thanks.

I followed your instructions and everything works like a charm. But I have one doubt: I added an @import in the style.css in order to load the custom folder with the custom .scss. But what will happen next time I make a git pull? The style.scss will no more contain my import or am I wrong?

Hi,

You can do slight change on Metronic’s source files but we strongly recommend you to record your changes in a document for your future references. Sometimes merge conflict can happen and your documentation will be best help to resolve it. Also for the SASS files, try to override the main framework config in the demo level config. So please try to not modify the core source code much and if you have any custom code just try to plug with import. If you need any further clarifications please let us know.

Thanks.

Hi, please fix the ‘Invalid reCaptcha validation’ on the layout builder! It’s appearing constantly!

Hi :),

Noted. We will remove this warning in the next update that planned to be released in a few days.

Thanks.

Nice, thanks :D

Hi, I have gone through demo’s and for angular 5 it only have dashboard , no inner pages. Is that has to be added from our end?

Or you are planning to provide it? Also there is datatable plugin issue as other users has reported. Is that sorted as well?

Hi,

Those features are already available. Please note that every Demo has an Angular integrated version which comes with the all features that you can see in the default demo. Please go and select a demo and check it’s Angular integrated version https://keenthemes.com/metronic/ by loggin in using the demo account.

Thanks.

Can you share a demo for `Datatable` that can popup a modal for editing row’s content when clicking the `edit` button ?

http://keenthemes.com/metronic/preview/default/angular/components/datatables/base/data-local

please send the demo to mikenian@outlook.com, if it suits your convenience.

Thanks.

Hi :),

Thanks for your suggestion. Noted, we will add this demo soon in future releases.

Thanks.

mp4

mp4 Purchased

Hi,

I use the old Template (Version 4.7.5). The “floating label input with value overlap issue” from “changelog for v3.8.0” still exist when you use the floating label in an modal with existing values.

Do you support the old template or just the new and would you fix bugs like this?

Hi,

Thanks for your feedback. We will fix bug report for v4.7.5 but we no longer provide updates for it. If possible could you please email more details(screenshots, your code) to our support at support@keenthemem.com ? Please don’t forget renew your support subscription as its already expired. For more info please check: https://help.market.envato.com/hc/en-us/articles/208191263-What-is-Item-Support- or http://themeforest.net/page/item_support_policy

Thanks.

Hi! some link are broken in demo. Here is a short video screen http://take.ms/BaDo4

In v5 those header menu links are dummy links. In v5 the ecommerce templates will be added soon. But you can use v5’s existing components and plugins to build any CRUD templates your own since all the required features are available.

Now everything is clear :) thanks! And when will these templates http://prntscr.com/hyfhjo approximately?

We can’t confirm any ETA for upcoming features. But we will do our best to release them asap :)

Hello Kennthemes please I have problem with tabbed portlet in metronic v5 default It does not switch to ohter tab when clicking .Any help from you will be apreciated.Thanks

Hi,

You should be able to get it working by carefully referring to the below working examples: https://keenthemes.com/metronic/preview/?page=components/portlets/tabbed&demo=default

For any further support please contact our support at support@keenthemes.com and provide your purchase key to receive the theme support.

Thanks.

Hi, I noticed that Demo2 and Demo5 are not scaling properly on mobile devices Any plans on fixing it soon?

Hi,

Thanks for your feedback.

If possible could you please provide more details or screenshot so we can have an info on which areas to look at ?

Thanks.

Oops, my bad, that issue appears only on the Firefox(57) responsive design mode on PC. It’s working perfectly on chrome dev tools and most importantly, on an actual phone.

Now I can go ahead and purchase. Thanks for your time.

PS: are badges, ribbons, and accordions coming? I couldn’t find those in the demo.

Hi :),

Glad to hear that. You are the most welcome. Thanks for choosing Metronic.

G’day KeenThemes,

Is it possible to get v4 of this theme? If so, is it possible to get both v4 and v5?

Cheers

Hello,

Yes, download package comes with both 4.x and 5.x versions.

Thank you.

Ah. Wonderful. On a single application, am I allowed to use both versions?

Yes, sure, you can use both version on a single app. But if you use it for multiple apps you will need to purchase a separate license for each app.

Do you have inline editing for angular 4 ? if not when you will add it ?

Hi :),

Thanks for your feedback. We will check this feature further and consider. Usually we do not give timeline for features that we have to consider. I hope for your understanding.

Thanks.

how to set custom width colum on html table ? i already tried th style=”width: 150px !important”> , and it’s not working

Hi,

You should set width in the JS initialization of your datatable. For more info please refer to the documentation: https://keenthemes.com/metronic/documentation.html

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