Problem With Drawer
Version: Metronic HTML v8.2.5 Demo1
Problem, page: https://preview.keenthemes.com/metronic8/demo1/apps/customers/list.html
SS: (open mobile and click chat)
Workaround: The issue is that it causes the width of the page to be calculated differently as the page loads. In this page, this is caused by DataTable. For example, this problem does not exist on the home page. Chat works fine there.
The solution I implemented was by putting the KTComponents.init() code in scripts.bundle.js into the JQuery ready event.
Strangely, the "document.addEventListener("DOMContentLoaded",..........." code does not work here, I don't understand it. That's why I used JQuery.
Thanks.
Replies (7)
Hi,
Please try to use KTUtil's dom ready event handler for your logic:
KTUtil.onDOMContentLoaded(function () {
// your code goes here...
});Regards.
Hi,
File: scripts.bundle.js
Working code:
Not Working 1:
Not Working 2:
I don't want to use jQuery.
When will you release an update regarding this issue?
Hi,
Are you putting the init code after all core js include, at the bottom of your page as a custom script ? For example custom-init.js.
I think the issue is related to datatable loading.
Can you try to use responsive datatable so that during the loading it won't break the page head and lead to width miscalculation for drawers? You can try to wrap the datatable with a div and use table-responsive class for it.
Regards.
Hi,
You can see the problem live from here: https://preview.keenthemes.com/metronic8/demo1/apps/customers/list.html
Hi,
As a workaround for the issue can you try to use data-kt-drawer-width="{default:'300px', 'lg': '500px'}" attribute instead?
Regards.
Hi 
,
Glad to hear that. All the best with your projects.
Regards.
Your Support Matters!
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
