Use ngx-scrollbar for ngx-bootstrap's tab content

Question

In my project I am using bootstrap 4 and ngx-bootstrap. Now I need to create a component that will include 2 scrollable div, switched by tabs.

I would like to show a sample application in stackblitz, but I can't create it.

So here is my component where I want to place these tabs:

<div class="d-flex flex-column h-100">
  <div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>
  <tabset [justified]="true">
    <tab heading="Title 1">
      <ng-scrollbar [autoHide]="true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class="" heading="Title 2">
      <ng-scrollbar [autoHide]="true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

In the AppFooList component I will place a list of items. For example it would be similar to the following code:

    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    hiiiiiiii <br>
    ...

Can you help me fix my code so that it works correctly? Ngx-scrollbar doesn't work with tabs' content. All of my tries ended with scrolling the whole app because the content has a bigger height than rest of app or the content will be scrollable but the ngx-scrollbar wasn't applied and the scrollbar was ugly. I need the height of div to be the rest of the space to the bottom. This is reason why I am using flexbox.

EDIT: code in stackblitz

Answer 1

Updated

Try this

Check demo here

<div class="d-flex flex-column h-100">
  <div class="border-bottom align-items-center d-flex flex-shrink-0 pr-3 pl-3" style="height: 60px !important;">
    <input type="text" class="form-control" id="search" placeholder="Search...">
  </div>
  <tabset [justified]="true">
    <tab heading="Title 1" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide]="true">
        <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
    <tab class="" heading="Title 2" [ngStyle]="{'height':'calc(100vh - ' + offsetHeightVal + 'px)'}">
      <ng-scrollbar [autoHide]="true">
         <app-foo-list></app-foo-list>
      </ng-scrollbar>
    </tab>
  </tabset>
</div>

app.component.ts

import { Component, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular 6';
  offsetHeightVal: number; //default value

  offset(el) {
    var rect = el.getBoundingClientRect(),
      scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
      scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
  }
  ngAfterViewInit() {
    this.offsetHeightVal = this.offset(document.querySelector('.tab-content')).top
  }
}

Answer 2

You could apply a height to the ng-scrollbar :

ng-scrollbar {
  height: 80vh;
}

Here is an edit of your stackblitz.