ag-Grid Column Header Text Not Automatically Truncating In Safari

0
votes

I am using ag-Grid to display data data grids in a web application.

In the case where a column header is longer than the width of the column, it is automatically truncated with an ellipses in Chrome (v 60.0) and Firefox (v 56.0).

enter image description here

However, when viewing the same exact table in Safari (v 11.0), rather than truncating, the column header text does not display at all until the column is resized to fit.

enter image description here

When I view ag-Grid's own site in Safari, the headers on their example grids do truncate, but I can't seem to find any specific property that would allow me to change whether or not this happens.

Any thoughts on how to solve this issue so that the Safari column headers truncate as they do in Chrome would be greatly appreciated!

1
safariag-grid

1 Answers

0
votes

After some side-by-side comparison, I discovered that in Safari, the column headers had a CSS property of display: table-cell, whereas Chrome did not specify anything for display.

In order to fix the issue, I included the following in my CSS:

.ag-header-group-cell-label {
    display: inline !important;
}