web-dev-qa-db-fra.com

Utiliser ngx-scrollbar pour le contenu de l'onglet ngx-bootstrap

Dans mon projet, j'utilise bootstrap 4 et ngx-bootstrap. Maintenant, je dois créer un composant qui inclura 2 div à défilement, commuté par des onglets.

Je voudrais montrer un exemple d'application en stackblitz, mais je ne peux pas le créer. 

Alors voici mon composant où je veux placer ces onglets:

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

Dans le composant AppFooList, je placerai une liste d'éléments. Par exemple, il serait similaire au code suivant:

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

Pouvez-vous m'aider à corriger mon code afin qu'il fonctionne correctement? Ngx-scrollbar ne fonctionne pas avec le contenu des onglets. Tous mes essais se sont soldés par le défilement de l'application entière, car le contenu a une hauteur supérieure à celle de l'application, sinon le contenu sera déroulable, mais la barre de défilement ngx n'a pas été appliquée et la barre de défilement était moche. J'ai besoin que la hauteur de div soit le reste de l'espace au fond. C'est pourquoi j'utilise flexbox.

EDIT: code en stackblitz

cssangulartwitter-bootstrapflexboxngx-bootstrap
8
Denis Stephanov

Mise à jour

Essaye ça

Voir la démo ici 

<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
  }
}
2
Jyoti Pathania

Vous pouvez appliquer une hauteur au ng-scrollbar:

ng-scrollbar {
  height: 80vh;
}

Voici une édition de votre stackblitz.

1
ibenjelloun