3
votes

Le texte de la cellule d'en-tête Ngx-datatable n'est pas aligné verticalement

J'utilise ngx-datatable dans mon projet angulaire. Les colonnes sont -> "Taux de production estimé", "Wk1Rate", "WK2Rate", "WK3Rate".

J'ai appliqué le wrapping pour le texte en utilisant css afin que pour accueillir le texte - "Taux de production estimé" dans la cellule d'en-tête. Ainsi, le taux de production estimé est affiché sur 3 lignes, tandis que les autres noms de colonnes sont affichés sur une seule ligne. headerheight est 'auto', l'alignement du texte pour les cellules d'en-tête est "center"

Problème - Les textes - "Wk1Rate", "WK2Rate", "WK3Rate" - ne sont pas alignés verticalement dans la cellule d'en-tête. ces textes s'affichent en haut comme indiqué dans l'image:

Comment faire pour que ces colonnes s'alignent verticalement au milieu.? J'ai essayé d'aligner verticalement: au milieu, mais ne fonctionne pas. Veuillez aider.

code html pour ngx-datatable:

    <ngx-datatable class="material" [rows]="MyRows" [headerHeight]="'auto'" [footerHeight]="40"
     [rowHeight]="37" [limit]="10">
        <ngx-datatable-column name="Est Production Rate" [sortable]="false" 
         [width]="85">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
        <ngx-datatable-column name="Wk1Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk2Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>

        <ngx-datatable-column name="Wk3Rate" [width]="80">
            <ng-template ngx-datatable-cell-template let-value="value">
                {{value}}
            </ng-template>
        </ngx-datatable-column>
    </ngx-datatable>

stackblitz

angular css ngx-datatable

4 commentaires

Est-il possible d'afficher sur stackblitz.com ?

Vous devez partager le code minimal pour reproduire cela.

@ JitendraG2 Lien Stackblitz fourni.

@VilleKoo a inclus le html pour datatable

3 Réponses :

5
votes

Essayez ceci dans les styles globaux.

.datatable-header-cell
{
   display: flex !important;
   align-items: center !important;
}

3 commentaires

Oui, cela fonctionnait lorsque la hauteur de l'en-tête était «auto». Lorsque la hauteur de l'en-tête est de 50, tous les textes sur une seule ligne sont alignés en bas et pour le texte sur plusieurs lignes, la dernière partie est masquée. Comment puis-je résoudre ce problème.?

Ce n'est pas une question de centrage du contenu, si vous définissez la hauteur de l'en-tête sur 50, bien sûr, le contenu multiligne ne sera pas visible.

D'accord avec @VilleKoo. Dans cette situation particulière, je suggère lorsque la hauteur est de 50. Utilisez .datatable-header {height: 50px! Important; affichage: flex! important; } , cela ne créera aucun problème si la hauteur est auto ou 50.

2
votes

Cela fonctionne pour moi

.ngx-datatable .datatable-body .datatable-body-row > div {
   align-items: center;
}

0 commentaires

0
votes

Cela fonctionne après l'ajout de styles globle

.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap {
  text-align: center;
}

0 commentaires