web-dev-qa-db-ja.com

ag-gridでヘッダーをワードラップする方法

Ag-gridを使用して、長いヘッダーを2行に分割する方法はありますか...

ColumnDefs headerNameの改行：'Long<br />Header'そこに途中で行きます（開発ツールを使用すると、テキストにbrがあることがわかります）。ただし、周囲の要素の1つは高さが25pxです。 <div class="ag-header" style="height: 25px;">ヘッダーの2行目が表示されないと思います。

私はテキストを分割するために暫定的にグループヘッダーを使用することについて疑問に思いましたが、オプションにならない長い期間（グループ化する必要がある場合）...

ag-grid
17
pete r

CSSに以下を追加してみてください：

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

これをグリッドオプションに追加します。

headerHeight: 48
18
Stian Sandve

私にとって、上記の解決策はどれもうまくいきませんでした。私にとってうまくいったことは、（GridOptionsの）headerHeightを指定した高さに設定してから、以下を追加することでした。

.ag-header-cell-text {
   overflow: visible;
   text-overflow: unset;
   white-space: normal;
}

私の場合、.ag-header-cellラッパークラスに何も追加する必要はありませんでした。

次のバージョンを使用しています。

"ag-grid-angular": "18.1.0",
"ag-grid-enterprise": "18.1.1",
4
JordanBarber

[email protected]を使用すると、次のソリューションのみが機能しました。

.ag-header-cell-label .ag-header-cell-text {
  white-space: normal !important;
}

これは、私が本当に!important。

4
Andrew Eisenberg

ヘッダーの特定の位置で改行が必要な場合は、_white-space: pre_を使用してこれを実現できます。これをCSSに追加します（別のものを使用している場合はテーマを変更します）。

_.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
  white-space: pre;
}
_

そして、それに応じて_\n_文字をヘッダー名に追加します。また、gridApi.setHeaderHeight()およびgridApi.setGroupHeaderHeight()を使用して、十分な高さがあることを確認する必要があります。

1
Waruyama

私にとっては、[email protected]と[email protected]の組み合わせを使用して、以下が機能しました：

::ng-deep .ag-header-cell-text {            
    text-overflow: clip !important;
    overflow: visible !important;
    white-space: normal !important;
}

:: ng-deep は、Angular CSS Combinator（directive）です。これは、Stianの回答に基づいていますが、私の場合は、.ag-header-cell-labelではなく、機能しました。 .ag-header-cell-textのみ。

グリッドオプションオブジェクトで、ヘッダーの高さを設定する必要があります。

this.testGridOptions = <GridOptions>{
            onGridReady: () => {
                this.testGridOptions.api.setHeaderHeight(75);
                this.testGridOptions.api.sizeColumnsToFit();
            }
        };
1
Alex Pandrea