After upgrade to ABP 9, the component scroll bar is gone. From console log, ERROR TypeError: Cannot read properties of null (reading 'scroll') at DashboardSummaryComponent.scrollToTop
2 Answer(s)
-
0
Hi,
Do you use LeptonX theme?
And how you were using this scrollbar API in your application? That might be an internal API that you used in javascript
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post) -
0
Yes, the app is using LeptonX theme. With help of AI, add the following styles to make scroll bar visible on main Lepton Content:
//Section ABP 9 Lepton 4.1.1 scroll bar fix // WebKit (Chrome, Safari, newer Edge) ::-webkit-scrollbar { width: 8px; height: 8px; display: block; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }
// Firefox
- { scrollbar-width: thin; scrollbar-color: #aaa #f1f1f1; }
// Ensure the main scrollable containers have overflow properties set .lpx-content { overflow-y: auto !important; overflow-x: hidden !important; /* Fix for Lepton 4.4.1 scrollbar issues */ display: flex; flex-direction: column; height: 100%; max-height: 100vh; position: relative;
/* Force scrollbar visibility */ &::-webkit-scrollbar { width: 8px; height: 8px; display: block !important; opacity: 1 !important; visibility: visible !important; }
&::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; display: block !important; opacity: 1 !important; visibility: visible !important; }
&::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px; display: block !important; opacity: 1 !important; visibility: visible !important; } }
/* Additional fix for Lepton 4.4.1 - ensure main content area scrolls properly */ .lpx-wrapper { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
Markdown supported.Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)
