Scroll problem on Angular Demo 5
The Demo5 template in Angular (maybe in others, I didn't check) has a problem when accessing an error screen and then going to a page where there is enough content to activate the screen scroll. The problem also occurs in the preview within the keenthemes page:
Access:
https://preview.keenthemes.com/metronic8/angular/demo5/error/404
Then access and scroll:
https://preview.keenthemes.com/metronic8/angular/demo5/apps/tickets-system/main
The problem occurs when the #kt_wrapper div has the padding-left: 225px; style more than what was already intended for the side-bar.
I use Chrome browser 130.0.6723.58 (Official Build) (x86_64) on a MacOS 15.1.
Replies (4)
I'm glad to hear it worked perfectly!
Thank you, Thiago Pires.
Hi Thiago Pires
Sorry for the delay.
we need to adjust the padding of the #kt_wrapper div when navigating from the error screen to a content-heavy page. This can be done that the padding is reset or adjusted appropriately when the sidebar is toggled or when navigating between pages.
Here’s a simplified code update to the MenuComponent.ts file, where we can add logic to handle the padding of the #kt_wrapper div:
/demo5/src/app/_metronic/kt/components/MenuComponent.ts
...
private _toggle = () => {
if (EventHandlerUtil.trigger(this.element, "kt.drawer.toggle") === false) {
return
}
if (this.shown) {
this._hide()
} else {
this._show()
}
// Adjust padding of #kt_wrapper based on sidebar visibility
const wrapper = document.getElementById("kt_wrapper");
if (wrapper) {
if (this.shown) {
wrapper.style.paddingLeft = "225px"; // Adjust as necessary
} else {
wrapper.style.paddingLeft = "0"; // Reset padding when hidden
}
}
}
...Added logic to adjust the padding-left of the #kt_wrapper div based on whether the sidebar is shown or hidden. the padding will correctly set when navigating between pages.
Used document.getElementById to select the #kt_wrapper div and modify its style.
If it does not work, please let me know.
Thanks
Worked as a charm! Thank you, Faizal.
Hi Thiago Pires,
Apologies for the delay, and thank you for your feedback. We will investigate the issue and work on a fix. Currently, there is no available workaround, but we’ll keep you updated as soon as we have a solution.
Thanks
