css - style - ¿Cómo cambiar la altura de la fila ui-grid?
ui grid resize columns (4)
Estoy usando ui-grid . Tengo muchas 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 lío. He añadido un ejemplo aquí http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpR?p=preview Este es uno de los tutoriales del sitio web de 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 se eliminan las reglas CSS anteriores. Por lo tanto, debo agregar más reglas CSS o usar algunas API de la cuadrícula para establecer el alto de 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 debe ser bastante obvia.
Intenta agregar 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;
}
Saca:
height: 22px !important;
desde el css y agregue:
rowHeight:22
a la gridOptions.
Tengo la sensación de que esto es mucho más suave.
Simplemente alterar la clase de la red en consecuencia.
.grid{
height: 70vh;
}
scope.gridOptions = {rowHeight: 33} La mejor manera de cambiar el alto de fila es desde las opciones de la cuadrícula.