Hi ,

Thanks for your interest in Metronic. This demo will be released as demo 17 in Metronic 8 in the next week. Please stay tuned!

Regards, Sean

Hi,

Could you please clarify your question ? Do you need to reduce the aside menu bar width or completely remove it ?

Regards, Sean

Hi,

Yes, we are planning to update the react-router in upcoming releases.

Regards,
Lauris

Hi,

Could you please clarify your issue in details?

Thanks

in the menu page config here : https://i.ibb.co/Fwc9kjn/SNAG-0003.png

I can only type in the static path for the menu item, for example : tax/create. As I try to put the route URL which is {{ route(tax.create) }}, the rendering of the URL doesn’t come right, the URL of the menu item become : 127.0.0.0.0/”à_(èroute(tax.create)à)à)à and leads to a 404.

Hi,

In the menu.php config, you have to specify the path. route function does not support.

Thanks

Hi ,

Thanks for your interest in Metronic.

Please provide us your github username and we will grant you access to our private repo to download Metronic’s previous versions.

Regards, Sean

github username : devgr24

thanks for your help

Done! here you go: https://github.com/KeenthemesHub/Metronic

Hi,

The sweetalert plugin is already implemented, you can check usage example in file demo1/src/components/modals/forms/AddCustomerModal.vue. Also, you can find more examples in the official doc: https://sweetalert2.github.io/

For the drawer, we are using our custom component which is located in the folder: vue/demo1/src/assets/ts/components/_DrawerComponent.ts.

To use this component you need configurate it using attributes shown below:

data-kt-drawer="true" 
data-kt-drawer-name="chat" 
data-kt-drawer-activate="true" 
data-kt-drawer-overlay="true" 
data-kt-drawer-width="{default:'300px', 'md': '500px'}" 
data-kt-drawer-direction="end" 
data-kt-drawer-toggle="#kt_drawer_chat_toggle" 
data-kt-drawer-close="#kt_drawer_chat_close" 

Since a countUp plugin requires jQuery we haven’t added it into Vue as an alternative you can use vue3-count-to plugin. https://www.npmjs.com/package/vue3-count-to

Regards,
Lauris

Hi,

Could you please try to remove “defer” from the js include?

Thanks

yeap. I add ‘defer’ when I try do it working. But it’s still not working. <script type="text/javascript" src="{{ asset('assets/plugins/custom/datatables/datatables.bundle.js') }}"></script> <script type="text/javascript" src="{{ asset('assets/js/custom/user-management/users/list/table.js') }}"></script> <script type="text/javascript" src="{{ asset('assets/js/custom/user-management/users/list/export-users.js') }}"></script> <script type="text/javascript" src="{{ asset('assets/js/custom/user-management/users/list/add.js') }}"></script> <script type="text/javascript" src="{{ asset('assets/js/custom/widgets.js') }}"></script> if I move code from table.js file to datatables.bundle.js file. It working (before wrong in table.js file). I think table.js loaded before datatables.bundle.js loading. I think may be something like that noscript??? <link rel="preload" href="{{ asset('assets/plugins/global/plugins.bundle.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'" type="text/css"> <noscript> <link rel="stylesheet" href="{{ asset('assets/plugins/global/plugins.bundle.css') }}"> </noscript> <link rel="preload" href="{{ asset('assets/plugins/global/plugins-custom.bundle.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'" type="text/css"> <noscript> <link rel="stylesheet" href="{{ asset('assets/plugins/global/plugins-custom.bundle.css') }}"> </noscript> <link href="{{ asset('assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css"/> in laravel version have not user list page so I don’t know why. Pls help me.

Hi

As a workaround, could you please add this code at the top of the table.js where the datatable init. We will check it further.

window.$ = window.jQuery = require( 'jquery' );
require( 'datatables.net' );

Please run “npm run dev” to recompile the assets using mix.

Thanks

Hi ,

Thanks for your interest in Metronic. Yes, the aside width can be easily changed in the SASS variable in themes\metronic\html\demo1\src\sass\layout\_variables.scss:

// Aside
$aside-config: (
    z-index: 101, // Aside's z-index property
    transition-speed: 0.3s, // transition speed
    padding-x: 25px,
    menu-indention: 0.75rem,
    bg-color: #1e1e2d,
    logo-bg-color: darken(#1e1e2d, 2%),
    scrollbar-color: if(isDarkMode(), $gray-200, #3b3b64),
    scrollbar-hover-color: if(isDarkMode(), $gray-300, lighten(#3b3b64, 3%)),
    width: 265px, // Aside width for desktop mode
    minimized-width: 75px,  // Aside minimized width for desktop mode
    box-shadow: if(isDarkMode(), none, 0 0 28px 0 rgba(82,63,105,.05)), // Aside box shadow
    minimized-hover-box-shadow: if(isDarkMode(), none, 5px 0px 10px rgba(70, 78, 95, 0.075)) // Monimized hover box shadow
) !default;

Then recompile the assets folder with gulp or webpack.

For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html

Regards, Sean

Hi,

Sorry for the late reply.

Unfortunately, we weren’t able to find any provided solution.

Have you followed our Blazor tutorial or it is your custom integration? https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/integration/blazor.html

If you faced any issues or errors, could you please describe them? So that we can fix them in an upcoming release.

Regards,
Lauris

Hi,

Thanks for your feedback. The fixed toolbar works only with fixed layout. We will add a notice for this layout configuration.

We will consider the sticky toolbar layout in a future update. Which demo are you using ?

Regards, Sean

Demo 1

Nioted, thanks for the clarification.

Hi

When the column is in the hidden row, there is an event. You have to add the listener to trigger after the column is shown.

I am referring to this example. Probably it could help. https://datatables.net/examples/api/row_details.html

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open
        }
        else {
            // Open row
            // you can try to init dropdown here
        }
    } );

Thanks

not working

Hi,

We would suggest you to disable responsive option in the datatable, then for mobile view, you will have to use horizontal scroll. So the dropdown column will not be hidden.

responsive: false

Thanks

Hi ,

Appreciate your patience . We have just replied.

Regards, Sean

Hi,

Sorry for the late reply.

I think in React version you can add a variable to switch the state of the pricing page and update it when the top buttons are clicked.

let state = "monthly";

Then in the component switch prices and other content depending on this variable:

{ state === "monthly" ? 12 : 13 }

Regards,
Lauris

Hi ,

Thanks for your interest in Metronic.

Metronic is a custom HTML theme based on Bootstrap 5 and it requires further server side development according to a project requirements. It also has fully functional Laravel version with fully authentication, i18n support and some system modules to get started with any PHP based project. If you need any further clarifications please contact our support via support@keenthemes.com

For more info about using Metronic please check the theme documentation https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started.html and video tutorials https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html

Regards, Sean

Hi,

Thank you for your fast response. And thank you for giving me the link of the getting started documentation. It helped me a lot!

I will read and watch the video tutorial soon and can’t wait to order your beautiful theme!

Regards, Erlando

Great to hear your good start! All the best with your projects

Hi,

You need to remove code below in file vue/demo1/src/router/index.ts.

setTimeout(() => {
    window.scrollTo(0, 0);
}, 100);

Regards,
Lauris

Hi ),

Thanks for your interest in Metronic.

Sure, we will release complete ecommerce frontend and admin pages soon and you will get all future updates for free.

Regards, Sean

Any possible date? Thank You.

Sorry, we can’t confirm the date but we will do our best to release it asap. Stay tuned!

This plugin is discounted so we can not include in the Metronic package. If you still like to use it you can integrate it within gulp and use for your own needs. Please check the “Manage Metronic With Gulp” https://preview.keenthemes.com/metronic8/demo1/documentation/getting-started/video-tutorials.html

please provide any alternate because wordpress and other companies also using

Noted, We will check this further if there is any alternative solution.

Hi ,

Thanks for your feedback. We will double check it. Would be great if you can email our support via support@keenthemes.com and provide screenshot/code to use in our investigate of this matter.

Regards, Sean

Hi,

We have added this into our todo list and we will implement it soon and you can get all future updates for free. Thanks for your feedback on this.

Regards, Sean

Hi, thanks for adding it in ToDo. Really apricate and desperately waiting

Meantime, maybe you can fix sele2 search field focus issue too. Here is solution, which works for me https://github.com/select2/select2/issues/5993

$(document).on(‘select2:open’, () => { let allFound = document.querySelectorAll(’.select2-container—open .select2-search__field’); $(this).one(‘mouseup’,()=>{ setTimeout(()=>{ allFound[allFound.length – 1].focus(); },0); }); });

Hi ,

Thanks for sharing this. We will check it further and consider adding it in a future update.

Regards, Sean

Thanks a lot )