Fix scroll for nb-list inside nb-card

src/app/@theme/styles/_overrides.scss

@@ -9,6 +9,13 @@
     }
   }
 
+  nb-card nb-list {
+    @include nb-scrollbars(
+      nb-theme(card-scrollbar-color),
+      nb-theme(card-scrollbar-background-color),
+      nb-theme(card-scrollbar-width));
+  }
+
   .table {
     color: nb-theme(text-basic-color) !important;
   }

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html

@@ -1,6 +1,5 @@
-<nb-card-body>
+<ngx-traffic-bar-chart
-  <ngx-traffic-bar-chart [data]="trafficBarData.data"
+  [data]="trafficBarData.data"
-                         [labels]="trafficBarData.labels"
+  [labels]="trafficBarData.labels"
-                         [formatter]="trafficBarData.formatter">
+  [formatter]="trafficBarData.formatter"
-  </ngx-traffic-bar-chart>
+></ngx-traffic-bar-chart>
-</nb-card-body>

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss

@@ -1,19 +1,7 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
   ngx-traffic-bar-chart {
-    flex: 1;
     position: relative;
 
     ::ng-deep {

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss

@@ -3,7 +3,11 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  overflow: auto;
+  overflow: hidden;
+
+  nb-list {
+    height: 100%;
+  }
 
   .item {
     display: flex;

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html

@@ -1,6 +1,4 @@
-<nb-card-header>
+<span>Traffic</span>
-  <span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
-  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+  <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-    <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
+</nb-select>
-  </nb-select>
-</nb-card-header>

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss

@@ -1,14 +1,5 @@
-@import '../../../../@theme/styles/themes';
+:host {
-
+  display: flex;
-@include nb-install-component() {
+  align-items: center;
-  nb-card-header {
+  justify-content: space-between;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-
-    @include nb-ltr(padding-right, 4rem);
-    @include nb-rtl(padding-left, 4rem);
-  }
 }

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html

@@ -1,15 +1,23 @@
 <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
   <nb-card-front>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
       <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
       <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
-      <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
+        <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
       <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss

@@ -9,4 +9,11 @@
     @include nb-rtl(left, 1.25rem);
     cursor: pointer;
   }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
 }

src/app/pages/layout/list/list.component.html

@@ -15,12 +15,14 @@
   <div class="col-md-12 col-lg-6 col-xxxl-6">
     <nb-card class="list-card" size="small">
       <nb-card-header>Users</nb-card-header>
-      <nb-list>
+      <nb-card-body>
-        <nb-list-item *ngFor="let user of users">
+        <nb-list>
-          <nb-user [name]="user.name" [title]="user.title">
+          <nb-list-item *ngFor="let user of users">
-          </nb-user>
+            <nb-user [name]="user.name" [title]="user.title">
-        </nb-list-item>
+            </nb-user>
-      </nb-list>
+          </nb-list-item>
+        </nb-list>
+      </nb-card-body>
     </nb-card>
   </div>
 </div>