web-dev-qa-db-ja.com

UIグリッド行の高さを変更するにはどうすればよいですか？

私は ui-grid を使用しています。行がたくさんあるので、スクロールを使用します。行の高さを変更しようとするまで、すべてが正常に機能します。その後、スクロールが混乱します。ここに例を追加しました http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview これは、ui-grid Webサイトのチュートリアルの1つです。変更されたのはCSSです。これらのルールを追加しました。

.ui-grid-cell-contents {
  padding: 1px 1px;
}

.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
.grid .ui-grid-row,
.grid .ui-grid-cell,
.grid .ui-grid-cell .ui-grid-vertical-bar {
  height: 22px !important;
  font-size: 12px;
  line-height: 20px;
}
.ui-grid-render-container-body .ui-grid-header-cell,
.ui-grid-render-container-left .ui-grid-header-cell,
ui-grid-header-cell {
  height: 55px !important;
}
.ui-grid-filter-container {
  padding: 1px 3px;
}

上記のCSSルールが削除されていれば、スクロールは完全に機能します。したがって、行の高さを適切に設定するには、CSSルールを追加するか、グリッドのAPIを使用する必要があります。どんな助けも大歓迎です。

行の高さを変更し、スクロールをスムーズに保つにはどうすればよいですか？

[〜＃〜] update [〜＃〜]：デフォルトのグリッドとCSSが変更されたグリッドの比較は次のとおりです： http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview 各グリッドの行を上下にスクロールしてみてください。違いはかなり明白なはずです。

cssangularjsng-gridangular-ui-grid
23
Pavel Nikolov

以下を取り出します。

height: 22px !important;

cssから追加します：

rowHeight:22

gridOptionsへ。

これはずっとスムーズだと感じています。

分岐プランカー

46
mainguy

scope.gridOptions = {rowHeight：33}行の高さを変更する最良の方法は、グリッドオプションからです。

22
Romcode

これをcssに追加してみてください：

.ui-grid-viewport .ui-grid-cell-contents {
  Word-wrap: break-Word;
  white-space: normal !important;
}

.ui-grid-row, .ui-grid-cell {
  height: auto !important;
}

.ui-grid-row div[role=row] {
  display: flex ;
  align-content: stretch;
}
8
Amir978

適宜grid classを変更します。

.grid{
    height: 70vh;
}
0
Rohan Jetha