web-dev-qa-db-ja.com

Angular 2マテリアル水平スクロールデータテーブルボーダーの問題

アプリケーションでAngular Material Dataテーブルを使用しています。水平スクロールテーブルで複数の列を表示する必要があります。テーブルの行の境界で問題が発生しています。幅全体が表示されていません。行。参照用に添付の画像を確認してください。この問題の解決を手伝ってください。

リンクでコード参照を確認してください

https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html

enter image description here

前もって感謝します。

angular-materialangular5angular-material2
5
Hariharan Subramanian

ヘッダー行と列行の両方がデフォルトで表示フレックスです。インラインフレックスを表示するように変更すると、上記の問題が修正されます

.mat-header-row, .mat-row {
    display: inline-flex;
}
2
vittaljk

IPadおよびモバイルデバイスの画面の場合は表示グリッドを使用する

mat-table {
   display: -ms-grid ;
   display: grid;
}
1
Aditya Tomar

これは古い投稿なので、他の誰かを助けるかもしれません。参照してください https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css

Your-comp-component.cssまたはyour-comp-component.scssに以下を追加するだけです

.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
1
Saqib Raja

相互に作用するスタイルプロパティがあります。各列にmin-width: 150px;を設定し、合計1950pxの13列があります。さらに、各行にwidth: 1123px;を（明らかに）1950px未満に設定しました。また、テーブル自体にmax-width: 1123px;-行と同じ幅-を設定しますが、スクロールバーを表示するには、テーブルを行より広くする必要があります。これらの問題を修正すると、境界線が正しく表示されます。行の幅のみを設定し、テーブルと列の幅の設定は省略してください。

0
G. Tranter

みんなこれはあなたがそのような問題を解決するのに役立ちます

使用を開始する必要があります：

幅：最大コンテンツ;

.mat-row,
.mat-header-row {
  min-width: 1123px;
  width: 100%;
  width: max-content;
}

.mat-table {
  overflow: scroll;
  max-height: 500px;
}

.mat-cell,
.mat-header-cell {
  min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
  top: 0;
  position: sticky;
  z-index: 1;
  background-color: inherit;
  text-align: center;
}

ブラウザのサポートを見つける： https://caniuse.com/#search=fit-content

0
Hasan Daghash

最善の解決策私はこの問題を克服しました。

  1. CSSで動的データ列を保持する

    columns = [
        {columnDef: 'select', width: 75},
        ...........
]

  2. 表示/非表示機能を実装する場合、CSS最小幅を再計算します

    recalculateCss() {
    let cellWidth = 0;
    for (let i = 0; i < this.selected.length; i++) {
        const cell = this.selected[i];
        const column = this.columns.filter((value, index) => value.columnDef === cell);
        cellWidth += column[0] ? column[0].width : 0;
    }
    this.minWidth = cellWidth;
}

  3. Mat-h​​eader-rowとmat-rowの両方にcssを追加します

    [style.min-width.px]="minWidth"
0
Thapld

テーブルのexpected withをmat-table {min-width}とmat-rowの左右のパディング（それぞれ24px）に設定する必要があります。

あなたの例の場合：

.mat-table {
  min-width: calc((13 * 150px) + 48px);
}

または

.mat-table {
  min-width: 1998px;
}

お役に立てれば！！！

0
Carlos Cuesta

マテリアルはフレックスレイアウトを使用しているため、align-self: stretch;を列CSSに追加します。これにより、テーブルに合わせて自動サイズのアイテムが拡大されます。

編集

Stackblitz

ヘッダーとセル幅の要素を削除すると役立ちます。行を100％の幅に設定し、必要な最小値を設定します。

.mat-row, .mat-header-row { min-width: 1123px; width:100%; }

0
jnathn