Class oj-table-column-header-sort-placeholder causes misalignment of text in column headers – Config

Summary

What is the purpose of oj-table-column-header-sort-placeholder? Can we reduce its size via css customization to make our column headers look better?

Content

Our column headers tend to be longer than one word (see image 1). Configuration JET makes all columns the same width and the header text is cut short.

 

When we apply the following css changes to wrap the text so it is fully displayed within the column header…

.oj-table-column-header-cell {

    white-space: normal;

    }

… we get the extra space which causes misalignment (see image 2). This happens because div class=“oj-table-column-header-sort-placeholder” takes 24x24 px of space.

We can eliminate this div by reducing its width, for example: