Ngx-datatable header cell text are not vertically aligned

Question

i am using ngx-datatable in my angular project. Columns are -> "Estimated Production Rate", "Wk1Rate", "WK2Rate", "WK3Rate".

I applied Wrapping for text using css so that to accommodate text - "Estimated Production Rate" within the header cell. Thus, Estimated Production Rate is displayed in 3 lines, whereas other column names are displayed in single line. headerheight is 'auto', text-align for the header cells are "center"

Problem - The texts - "Wk1Rate", "WK2Rate", "WK3Rate" - not vertically aligned within the header cell. these texts show at the top as shown in the image:

How can make these column to align vertically middle.? i tried vertical-align:middle, but not working. Please help.

html code for 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

Is it possible to show on https://stackblitz.com? – Jitendra G2 Jan 22 '19 at 11:48 — Jitendra G2, Jan 22 '19 at 11:48
You should share the minimal code to reproduce this. – VilleKoo Jan 22 '19 at 11:49 — VilleKoo, Jan 22 '19 at 11:49
@JitendraG2 Stackblitz link provided. – Sahi Jan 23 '19 at 04:58 — Sahi, Jan 23 '19 at 04:58
@VilleKoo included the html for datatable – Sahi Jan 23 '19 at 04:59 — Sahi, Jan 23 '19 at 04:59

score 7 · Accepted Answer · answered Jan 23 '19 at 06:15

7

Try this at globle styles.

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

answered Jan 23 '19 at 06:15

Jitendra G2

1,196
7
14

Yes, This worked when header height is 'auto'. When header height is 50, all the single line texts are aligned at the bottom and for multi line text, the last part is hidden. How can i fix that.? – Sahi Jan 23 '19 at 06:28
1

That's not a matter of centering content, if you set the header height to 50, of course the the multiline content will not be visible. – VilleKoo Jan 23 '19 at 06:49
1

Agree with @VilleKoo. On that particular situation, I suggest when height is 50. Use `.datatable-header{ height: 50px !important; display: flex !important; }`, It will not create any problem if height is auto or 50. – Jitendra G2 Jan 23 '19 at 06:50

score 2 · Answer 2 · answered Jul 04 '19 at 15:11

2

This works for me

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

answered Jul 04 '19 at 15:11

Paulo R. Gemniczak

29
5

score 0 · Answer 3 · answered Jul 29 '20 at 11:03

0

This is work for after adding globle styles

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

answered Jul 29 '20 at 11:03

Sanka Sanjeewa

1,993
14
16

Ngx-datatable header cell text are not vertically aligned

3 Answers3