web-dev-qa-db-ja.com

ngx-bootstrapタブのコンテンツにngx-scrollbarを使用する

私のプロジェクトでは、bootstrap 4とngx-bootstrapを使用しています。次に、タブで切り替えられる2つのスクロール可能なdivを含むコンポーネントを作成する必要があります。

Stackblitzでサンプルアプリケーションを表示したいのですが、作成できません。

したがって、これらのタブを配置するコンポーネントは次のとおりです。

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

AppFooListコンポーネントに、アイテムのリストを配置します。たとえば、次のコードのようになります。

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

正しく動作するようにコードを修正するのを手伝ってもらえますか？ Ngx-スクロールバーはタブのコンテンツでは機能しません。コンテンツの高さがアプリの他の部分よりも大きいか、コンテンツはスクロール可能ですが、ngx-scrollbarが適用されず、スクロールバーが醜いため、すべての試行はアプリ全体をスクロールすることで終了しました。 divの高さを、残りのスペースの下部にする必要があります。これが私がフレックスボックスを使用している理由です。

編集： stackblitzのコード

cssangulartwitter-bootstrapflexboxngx-bootstrap
9
Denis Stephanov

更新

これを試して

デモを確認してください 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
  }
}
2
Jyoti Pathania

ng-scrollbarに高さを適用できます：

ng-scrollbar {
  height: 80vh;
}

これがstackblitzの編集です。

1
ibenjelloun