Kendo Grid sort icon missing when header text get wrap

[Benjamin]

When I try to change the header text to wrap instead of showing ellipsis when it is too long. the sort icon seems to be missing. refer to the image below. what I would like to have is for the sorting icon to be top aligned, beside the word business

 

[Georgi Denchev]

Hi, Benjamin,

I've prepared a Dojo example with a wrapped text header, you can examine it here:

https://dojo.telerik.com/@gdenchev/IwonaWEh 

CSS

      .k-grid  .k-grid-header  .k-header .k-column-title {
        white-space: normal;
      }

The icon seems to be rendering normally:

You can position it at the top instead of the center by using the following rule:

      .k-grid  .k-grid-header  .k-header .k-i-sort-asc-sm {
        place-self: flex-start;
      }

Best Regards,
Georgi Denchev
Progress Telerik

[Benjamin]

hi,

I saw from ur dojo that the k-link for ur column header is <span>. while mine is <a>, not sure if it is due to this?

[Georgi Denchev]

Hi, Benjamin,

I am guessing that an older version of Kendo UI is being used and that is why the structure of the elements is different.

In this case, you can use an absolute position for the icon and then you can manually align it:

      .k-grid  .k-grid-header  .k-header {
        white-space: normal;
      }

      .k-grid-header .k-header.k-sorted > .k-link > .k-icon.k-i-sort-asc-sm,
      .k-grid-header .k-header.k-sorted > .k-link > .k-icon.k-i-sort-desc-sm {
        position: absolute;
        top: 50%;
        right: 5px;
      }

Dojo

https://dojo.telerik.com/@gdenchev/upubaqUt 

Best Regards,

Georgi

[Benjamin]

I have created a dojo to replicate my issue and the k-link being <a> when using version 2022.2.510

[Georgi Denchev]

Hello, Benjamin,

The provided Dojo example seems to have a lot of customizations and overriding of kendo styles so we cannot provide much support there. If the widget appearance/functionality breaks due to something on our end, we can provide assistance and potential workarounds.

However, if the cause is a custom implementation/solution, it is up to the developer to find a solution to the issue.

I've modified the Dojo and left only the styles for the text wrapping.

https://dojo.telerik.com/@gdenchev/azOdAgix 

Just as an advice, the style that seems to be affecting the icon's appearance is the following one:

      #grid-container .k-grid-header .k-header * {
        height: 100% !important
      }

However, I would still strongly advise against making such drastic changes to the kendo styles.

Best Regards,

Georgi