Ag-gridを使用して、長いヘッダーを2行に分割する方法はありますか...
ColumnDefs headerNameの改行:'Long<br />Header'
そこに途中で行きます(開発ツールを使用すると、テキストにbrがあることがわかります)。ただし、周囲の要素の1つは高さが25pxです。 <div class="ag-header" style="height: 25px;">
ヘッダーの2行目が表示されないと思います。
私はテキストを分割するために暫定的にグループヘッダーを使用することについて疑問に思いましたが、オプションにならない長い期間(グループ化する必要がある場合)...
CSSに以下を追加してみてください:
.ag-header-cell-label {
text-overflow: clip;
overflow: visible;
white-space: normal;
}
これをグリッドオプションに追加します。
headerHeight: 48
私にとって、上記の解決策はどれもうまくいきませんでした。私にとってうまくいったことは、(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",
[email protected]を使用すると、次のソリューションのみが機能しました。
.ag-header-cell-label .ag-header-cell-text {
white-space: normal !important;
}
これは、私が本当に!important
。
ヘッダーの特定の位置で改行が必要な場合は、_white-space: pre
_を使用してこれを実現できます。これをCSSに追加します(別のものを使用している場合はテーマを変更します)。
_.ag-theme-material .ag-header-cell-label .ag-header-cell-text {
white-space: pre;
}
_
そして、それに応じて_\n
_文字をヘッダー名に追加します。また、gridApi.setHeaderHeight()
およびgridApi.setGroupHeaderHeight()
を使用して、十分な高さがあることを確認する必要があります。
私にとっては、[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();
}
};