Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

Metronic 8 - Sidebar toogle does not work correctly


Hi,

I got this issue on your Metronic 8 - Demo 1
https://preview.keenthemes.com/metronic8/demo1/

I clicked on kt_app_sidebar_toggle to collapse the sidebar. Afterward, I hovered the sidebar, it expanded temporarily and the layout was broken. Things got even worse when I couldn't return the sidebar to the original state because every time I moved the mouse, the sidebar kept collapsing & expanding.

I assume that we need to consider the index of the sidebar. In fact, this feature still works well in some previous versions of Metronic 8 - Demo 1, before v8.3.2.

Thanks,
Jason


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 (3)


Hi Faizal, Micheal Clarke,

Thank you for the instructions regarding the temporary fix. At the moment, I am testing v8.3.2 before proceeding with our layout upgrade. We will not move forward with the upgrade if these issues are still present.

It would be greatly appreciated if these smaller issues could be fixed sooner, rather than waiting for the next release, which typically takes a few months. In the meantime, I will continue testing v8.3.2 and will report any additional issues I encounter.

Thanks,
Jason



Hi Jason

Thanks for reporting the bug. Here is the temporary workaround (to restore stable behaviour):
Disable “expand on hover” so the toggle alone controls the sidebar and the layout stays stable.
In your layout, set on the body element:
data-kt-app-sidebar-hoverable="false"
If you use the Layout Builder (Demo 1), turn off the option “Expand minimized sidebar on hover” (or the equivalent “hoverable” option) so the theme does not add data-kt-app-sidebar-hoverable="true".
With hover-expand off, the sidebar will stay minimized when you click the toggle and won’t fight with hover.

Proper fix:
The conflict between toggle state and hover-expand (including the .animating guard and possible z-index/stacking) needs a code-level fix. I’ll escalate this to our development team so they can provide a proper fix.



This behavior has been reported by other users after the v8.3.2 update. The hover-expand combined with the toggle state seems to conflict, especially when the sidebar is set to minimize mode. Checking recent changes in the sidebar hover configuration or disabling hover temporarily could help narrow it down.


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  :(