fix scrollbar always showing up bug

NREL · Oct 10, 2024 · 3ba52c8 · 3ba52c8
1 parent df08597
commit 3ba52c8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 10 deletions.
diff --git a/src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.css b/src/app/setup-wizard/setup-wizard-help-panel/setup-wizard-help-panel.component.css
@@ -1,7 +1,7 @@
 .navbar{
     width: 20rem;
     background-color: #ffffff;
-    overflow-y: scroll;
+    overflow-y: auto;
     /* height: 100%; */
     /* max-height: 100%; */
     flex-wrap: nowrap;

diff --git a/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css b/src/app/setup-wizard/setup-wizard-sidebar/setup-wizard-sidebar.component.css
@@ -1,7 +1,7 @@
 .navbar{
     width: 20rem;
     background-color: #ffffff;
-    overflow-y: scroll;
+    overflow-y: auto;
     /* height: 100%; */
     /* max-height: 100%; */
     flex-wrap: nowrap;

diff --git a/src/styles.css b/src/styles.css
@@ -9,7 +9,7 @@
 
 
 
-.btn.btn-outline-neb{
+.btn.btn-outline-neb {
     font-weight: bolder;
     --bs-btn-color: var(--neb-color);
     --bs-btn-border-color: var(--neb-color);
@@ -27,7 +27,7 @@
     --bs-gradient: none;
 }
 
-.btn.btn-outline-metric{
+.btn.btn-outline-metric {
     font-weight: bolder;
     --bs-btn-color: var(--metric-color);
     --bs-btn-border-color: var(--metric-color);
@@ -45,7 +45,7 @@
     --bs-gradient: none;
 }
 
-.btn.btn-outline-energy-opp{
+.btn.btn-outline-energy-opp {
     font-weight: bolder;
     --bs-btn-color: var(--energy-opp-color);
     --bs-btn-border-color: var(--energy-opp-color);
@@ -66,7 +66,7 @@
 
 
 
-.neb-button{
+.neb-button {
     background-color: var(--neb-color);
 }
 
@@ -75,16 +75,34 @@
     cursor: pointer;
 }
 
-.overflow-scroll{
-    overflow-y: auto;
+.neb-container .overflow-scroll {
+    overflow-y: auto !important;
 }
 
-.bold{
+.neb-container ::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+}
+
+.neb-container ::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    /*background-color: rgba(0, 0, 0, 0.3);*/
+    background-color: rgb(0 0 0 / 15%);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+.neb-container ::-webkit-scrollbar-button {
+    display:none;
+}
+
+
+.bold {
     font-weight: bold;
 }
 
 
-a.click-link:hover{
+a.click-link:hover {
     cursor: pointer;
 }