Cómo cambiar la altura de la fila ui-grid?

Estoy usando ui-grid. Tengo un montón de filas y es por eso que uso el desplazamiento. Todo funciona perfectamente bien hasta que intento cambiar la altura de las filas. Entonces el desplazamiento se convierte en un desastre. He añadido un ejemplo aquí http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Este es uno de los tutoriales del sitio web ui-grid - lo único que he cambiado es el CSS. He añadido estas reglas.

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

El desplazamiento funciona perfectamente bien si las reglas CSS anteriores son quitar. Así que necesito agregar más reglas CSS o necesito usar alguna API de la cuadrícula para establecer la altura de la fila correctamente. Cualquier ayuda será muy apreciada.

¿Cómo cambio la altura de la fila y mantengo el desplazamiento suave?

ACTUALIZACIÓN : Aquí hay una comparación entre una cuadrícula predeterminada y una con CSS modificado: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview intenta desplazar las filas hacia arriba y hacia abajo para cada cuadrícula. La diferencia debería ser bastante obvia.

Author: Pavel Nikolov, 2014-11-29
Source

4 answers

Saca el:

height: 22px !important;

Desde el css y añadir: 

rowHeight:22

A las gridOptions.

Tengo la sensación de que esto es mucho más suave.

Émbolo bifurcado

 45
Author: mainguy,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-12-01 13:23:20

Alcance.gridOptions = { rowHeight: 33 } La mejor manera de cambiar la altura de la fila es desde las opciones de cuadrícula.

 21
Author: Romcode,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-14 13:27:29

Intenta añadir esto a tu 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;
}
 7
Author: Amir978,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-02 05:03:59

Simplemente altere la clase grid en consecuencia.

.grid{
    height: 70vh;
}
 0
Author: Rohan Jetha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-07 07:23:11