Column header and content alignment mismatch

[Sandro]

Hi all

I have an issue with the alignment of the header and content columns. Chrome displays the grid correctly but in Firefox the header columns aren't aligned with the content columns (see attachments). It seems that as soon as the scrollbar is visible, Firefox doesn't take into account the width of the scrollbar for the header columns. Is there a way to get around that issue?

Best regards,
Sandro

 

[Svet]

Hi Sandro,

Thank you for the demonstrated screenshots.

I just tested the following example which demonstrates a scrollable Grid in Firefox and the cells seem to be properly aligned:
https://stackblitz.com/edit/angular-kyzlq4?file=app/app.component.ts

I would suggest to make sure that the latest versions of the Grid and Kendo theme are used in order to avoid any unexpected behavior:

Grid latest version 4.0.0:
https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

Kendo Default theme latest version 3.7.0:
https://www.telerik.com/kendo-angular-ui/components/styling/theme-default/changelog/

In case the issue persists, could you provide some more relevant details about the use case scenario, so that we are able to reproduce the demonstrated appearance as in the screenshots. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Sandro]

Hi
Thank you for your response. I've updated the kendo grid to version 4.0.0 without any success, the header is still misaligned. I  analysed the generated HTML code on Stackblitz as well as in our solution and found those differences:

<div class="k-grid-header" role="presentation" style="padding: 0px 16px 0px 0px;">
...
</div>

This is from your Stackblitz example and looks identically as in our solution for Chrome.

<div class="k-grid-header ng-star-inserted" role="presentation" style="padding: 0px;">
...
</div>

This one is from our solution for Firefox. If you add that 16px padding to the right manually, the grid looks fine as it should. I suppose that the styling attribute is set within the kendo grid component, how is the padding calculated and applied?

Any help is greatly appreciated,
Sandro

[Svet]

Hi Sandro,

The referened inline style="padding: 0px 16px 0px 0px;" comes from within the Grid component. Check the grid.component.ts file:

...
    public get headerPadding(): any {
        if (isUniversal()) {
            return "";
        }

        const padding = Math.max(0, this.scrollbarWidth - 1) + 'px';
        const right = this.rtl ? 0 : padding;
        const left = this.rtl ? padding : 0;
        return `0 ${right} 0 ${left}`;
    }
...

The padding is calculated dynmaically based on wheter there is a scrollbar or not. The complete source code of the grid.component.ts file can be found within the project's node_modules folder or by following the instructions on the following page:
https://www.telerik.com/kendo-angular-ui/components/installation/source-code/

I can confirm that the padding style is set correcly for Firefox as well. It is possible that the browser has some cache stored and thus the style set by the latest version of the Grid might not be propely applied.

Let me know in case I can provide any further information on this case.

Regards,
Svetlin
Progress Telerik