Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs.
I was hoping to demonstrate a sample application on stackblitz, but unfortunately, I am struggling to create it.
Below is the component structure where I intend to implement 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>
The AppFooList component will contain a list of items. The structure might resemble the following code snippet:
hiiiiiiii <br>
hiiiiiiii <br>
hiiiiiiii <br>
hiiiiiiii <br>
...
I would appreciate any assistance in fixing my code to ensure its proper functionality. I have encountered difficulties with ngx-scrollbar interacting with the content within tabs. My attempts so far have resulted in either the entire app scrolling due to content height surpassing the space available or scrollbar issues. I need the div's height to occupy the remaining space. This is why I opted for using flexbox.
EDIT: code in stackblitz