web-dev-qa-db-fra.com

Comment changer la hauteur de la ligne ui-grid?

J'utilise ui-grid . J'ai beaucoup de lignes et c'est pourquoi j'utilise le défilement. Tout fonctionne parfaitement bien jusqu'à ce que j'essaye de changer la hauteur des rangées. Ensuite, le défilement devient un désordre. J'ai ajouté un exemple ici http://plnkr.co/edit/S6ylwOVgcQp7CSsZZxpxp?p=preview Ceci est l'un des tutoriels du site Web ui-grid - la seule chose que j'ai changée est le CSS . J'ai ajouté ces règles.

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

Le défilement fonctionne parfaitement bien si les règles CSS ci-dessus sont supprimées . Donc, soit je dois ajouter plus de règles CSS, soit utiliser une API de la grille afin de définir correctement la hauteur des lignes . Toute aide sera importante. apprécié. 

Comment changer la hauteur des lignes et continuer à faire défiler en douceur?

UPDATE: Voici une comparaison entre une grille par défaut et une structure avec CSS modifié: http://plnkr.co/edit/x1nQGvpkY4bRMs9D09Ws?p=preview essayez de faire défiler les lignes de haut en bas pour chaque grille. La différence devrait être assez évidente.

cssangularjsng-gridangular-ui-grid
22
Pavel Nikolov

Sortez le:

height: 22px !important;

à partir du css et ajouter:

rowHeight:22

à la gridOptions.

J'ai l'impression que c'est beaucoup plus lisse.

Plunker fourchu

46
mainguy

scope.gridOptions = { rowHeight: 33 } Le meilleur moyen de modifier la hauteur des lignes consiste à utiliser les options de la grille.

21
Romcode

Essayez d'ajouter ceci à votre 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

Il suffit de modifier grid class en conséquence.

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