Text is not vertically centered in rows with fixed rowHeight

[arlowhite]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior

Set a smaller rowHeight, for example rowHeight="30" Decrease row font with CSS font-size: 0.9rem Text is not vertically centered and cutoff at the bottom of the row depending on the font (and browser)

Expected behavior

Users should be able to decrease the size of rows with just rowHeight and a font-size change.

Reproduction of the problem

Using ngx-datatable project, npm start Edit demo/basic/basic-fixed.ts and set rowHeight="30"

What is the motivation / use case for changing the behavior?

Developers may want to display more rows on the screen than the default rowHeight and font-size. Note: rowHeight="auto" is centered. However fixed rowHeight is required when using scrollbarV.

Please tell us about your environment:

Ubuntu Linux

• Table version: 6.0.2

• Angular version: 2.4.6

• Browser: Chrome Version 56.0.2924.87 (64-bit) Firefox 45.7.0

  Text is slightly smaller and more vertically centered in Firefox than Chrome on my computer, probably due to different fonts.

[amcdnl]

Hmmm, its kinda up to the implementer if they are changing this to correct the CSS. We can't really make assertions about center alignment since you could put a really tall height and have multiple lines of text. Open to feedback though.

[elvisbegovic]

Just apply flex on content...with css I achieve this

[kaangoksal]

@elvisbegovic what css element did you add?

I added the following:

.ngx-datatable.fixed-row .datatable-scroll .datatable-body-row .datatable-body-cell,
.datatable-body-group-cell {
  overflow-x: visible !important;
  overflow: visible !important;
}

also you need to turn on the view encapsulation as following:

@Component({
  selector: 'app-good-table',
  templateUrl: './table-good.component.html',
  styleUrls: ['./table-goodd.component.css'],
   encapsulation: ViewEncapsulation.None
})

[arnaudfr]

@kaangoksal adding following CSS works for me :

.datatable-body-cell { display: flex; margin: auto; }