web-dev-qa-db-ja.com

Angular ui-gridを使用する場合の列ヘッダーの折り返し

AngularJSSPAアプリケーションをng-grid v2.0.7からui-grid v3にアップグレードしましたが、列ヘッダーが折り返されなくなりました。列ヘッダーが1行になり、列ヘッダーが収まらない場合は省略記号...が表示されます。

この機能は削除されましたか、それとも別の方法で置き換えられましたか？

angularjsng-gridangular-ui-grid
10
Intrepid

ui-grid-cell-contents CSSクラスをオーバーライドすることで、ヘッダー列のテキストを折り返す方法を見つけたと思います。

.ui-grid-header-cell .ui-grid-cell-contents {
     height: 48px;
     white-space: normal;
     -ms-text-overflow: clip;
     -o-text-overflow: clip;
     text-overflow: clip;
     overflow: visible;
}

これを私のsite.cssに追加すると、列名が期待どおりに次の行に折り返されていることがわかります。

Chrome（v41）およびFirefox（v35）で動作します。

32
Intrepid

私は私の仕事をさせるために次のcssを追加しました。必要な行数に応じて、行の高さが自動調整されます。水平方向にスクロールすると、表示されている内容に基づいて行数に変わります。

.ui-grid-header-cell-label {
    display:inline-block;
    white-space:initial;
}
3
kdahl