Jak zmienić wysokość rzędu ui-grid?

Question

Używam ui-grid. Mam dużo wierszy i dlatego używam przewijania. Wszystko działa idealnie, dopóki nie spróbuję zmienić wysokości wierszy. Wtedy przewijanie staje się bałaganem. Dodałem przykład tutaj: http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Jest to jeden z tutoriali ze strony ui-grid - jedyne, co zmieniłem to CSS. Dodałem te zasady.

.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; 
} 

Przewijanie działa idealnie, jeśli powyższe reguły CSS zostaną usunięte. Więc albo muszę dodać więcej reguł CSS, albo muszę użyć jakiegoś interfejsu API siatki, aby prawidłowo ustawić wysokość wiersza. Każda pomoc będzie doceniana.

Jak zmienić wysokość wiersza i przewijać płynnie?

UPDATE: Oto porównanie między domyślnym siatki i jeden ze zmodyfikowanym CSS: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview try przewijać wiersze w górę iw dół dla każdej sieci. Różnica powinna być dość oczywista.

Answer 1

Wyjąć:

height: 22px !important; 

z CSS i dodać:

rowHeight:22 

do gridOptions.

Mam wrażenie, że jest to znacznie płynniejsze.

Forked Plunker

Answer 2

scope.gridOptions = { rowHeight: 33 } Najlepszym sposobem zmiany wysokości rzędzie jest od możliwości sieci.

Answer 3

Spróbuj dodać to do Twojego 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; 
} 

Answer 4

Wystarczy zmienić siatki, należy klasę odpowiednio.

.grid{ 
    height: 70vh; 
}