CODEWITHSUNDEEP
cssangularngx-datatable
Sahi
Sahi

Reputation: 1484

Ngx-datatable header cell text are not vertically aligned

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:

enter image description here

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

Upvotes: 5

Views: 21275

Answers (3)

Sanka Sanjeeva
Sanka Sanjeeva

Reputation: 3520

This is work for after adding globle styles

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

Upvotes: 0

Paulo R. Gemniczak
Paulo R. Gemniczak

Reputation: 29

This works for me

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

Upvotes: 2

Jitendra G2
Jitendra G2

Reputation: 1206

Try this at globle styles.

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

Upvotes: 7

Related Questions