Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

Problem With Drawer


Version: Metronic HTML v8.2.5 Demo1

Problem, page: https://preview.keenthemes.com/metronic8/demo1/apps/customers/list.html
SS: https://prnt.sc/pVKUNxqzVB5O (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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (18)


Regards for those content and additionally awesome helpful hints.. still Document equally suspect that exertions is normally crucial element of possessing financial success.sbobetcash



Many thanks for that publish as well as excellent ideas.. actually We additionally believe that effort is actually the most crucial ingredient of obtaining achievement.grandjp



They can be a pretty decent helpful hints most definitely to make sure you many a new comers to blogosphere, transient and additionally specific information… Regards just for stating this tool. Recommended look at page.짝퉁 쇼핑몰



I simply believed it might be a concept to publish in case other people had been having issues studying however I'm just a little uncertain basically 'm permitted to place titles as well as handles upon right here.성남노래방



I’m motivated with all the surpassing and also preachy record which you supply in such tiny timing.제주홈타이



I’m motivated with all the surpassing and also preachy record which you supply in such tiny timing.제주홈타이



Continue the great function, We study couple of articles about this web site as well as I believe that the internet weblog is actually actual fascinating and it has obtained groups associated with wonderful info.1хбет промокод при регистрации



Nice to read your article! I am looking forward to sharing your adventures and experiences.pg soft slots



Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post.dota slot



Thank you for taking the time to publish this information very useful!Buy Instagram Followers



Di era digital yang semakin maju, permainan slot online telah menjadi hiburan yang sangat populer dan diminati banyak orang. Di antara berbagai pilihan yang ada, slot88 di ATLAS77 muncul sebagai bintang yang bersinar terang, membawa inovasi, keseruan, dan peluang besar bagi para pemain. Penasaran? Ayo daftarkan diri Anda sekarang!



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: https://prnt.sc/LBZhlvh_2JIa
Not Working 1: https://prnt.sc/RS1npX0GX10v
Not Working 2: https://prnt.sc/Qv7ZQ3m8Z6gB

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,
Absolutely dude! This fixed it and it worked!
Thanks <3



Hi happy,

Glad to hear that. All the best with your projects.

Regards.


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(