Как изменить высоту строки ui-grid?

Я использую ui-grid. У меня много строк, поэтому я использую прокрутку. Все работает нормально, пока я не попытаюсь изменить высоту строк. Тогда прокрутка становится беспорядком. Я добавил здесь пример http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Это один из уроков веб-сайта ui-grid - единственное, что я изменил, это 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 попробуйте прокрутить строки вверх и вниз для каждой сетки. Разница должна быть довольно очевидной.

Ответ 1

Выньте:

height: 22px !important;

из css и добавьте:

rowHeight:22

для gridOptions.

У меня такое ощущение, что это гораздо более плавное.

Forked Plunker

Ответ 2

scope.gridOptions = { rowHeight: 33 } Лучший способ изменить высоту строки - это параметры сетки.

Ответ 3

Попробуйте добавить это в свой 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;
}

Ответ 4

Просто измените класс сетки.

.grid{
    height: 70vh;
}