We are using the latest version (5.4.0) of the "Classic" SASS theme for Kendo UI and override several scss variables to adapt the grid's look&feel to our requirements. One thing we did was setting $grid-header-padding-x and $grid-header-padding-y to 2px each.
If the content of the grid header is long enough to be truncated, sorting indicators etc. are partially moved out of the cell.
Since I cannot modify scss variables in DOJOs, I have tried to apply CSS styles to simulate the behavior: https://dojo.telerik.com/EMOYUREh.
As you can see, the th element applies some padding that .k-cell-inner removes again. On the right side, however, the negative margin is bigger than the padding added by the th element which causes the content to move out of the cell.
Hi Georgi!
I chose 2px, because the effects is easier to spot in this case. However, you can already see that something's off when using the default values like you did. In the following picture, the blue area represents the .k-cell-inner element. As you can see, it is overflowing its parent th element.
In my opinion, this should not happen, because of the following: If you decrease the padding like I did, the overflow becomes bigger and parts of the content are no longer fully visible.
The margin calculation you mentioned looks the following in SCSS:
If you replace the variables with their default values and 2px for padding-x and padding-y, you end up exactly with the styles I created in my DOJO.
Changing the padding should not affect the calculation of the margin, since the padding is already considered there. This means that either the calculation method itself is wrong or some styling of surrounding elements breaks the positioning (both has nothing to do with my customizings).
Hello, Michael,
The described behavior seems to be occurring due to customizations and I'm unable to observe it without them. Unfortunately, I cannot mark this as a bug if the issue appears only when custom styles are applied.
These are the default values for the margin that is applied to the k-cell-inner element:
And this is the default padding applied to the th element:
With these values, the sorting indicator isn't overflowing outside of the header.
Solution
If you wish to change the padding to 2px, you should also change the margin calculation to match the newly updated padding.
.k-grid th .k-cell-inner {
margin: -2px calc(-1.42857em + 12px) -2px -2px;
}Let me know in case I misunderstood the issue.
Best Regards,
Georgi Denchev
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.