ABP 9 upgrade component scroll bar is gone #9296

2 Answer(s)

• 

  0

  enisn created 6 months ago

  Support Team .NET Developer

  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

  Save Cancel
• 

  0

  DominaTang created 6 months ago

  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; }

  Save Cancel