Grid header height problem occurs when using 'frozenColumns'

[TaeWook Kang]

Hi.

If you use 'frozenColumns' as the title says, it will cause problems. Please refer to the screenshot.

We had the same problem for a long time, but we solved it by adding 

.e-grid .e-frozenheader > .e-table {

        height: 142px;

    }

 to the style tag. But at some point, the problem happened again. I would appreciate it if you could suggest a way to solve this problem.

[Pavithra Subramaniyam]

Hi TaeWook Kang,

You can overcome the issue by setting the height for the movable table also. Please refer to the below code example for more information.

.e-grid .e-frozenheader > .e-table,

.e-grid .e-movableheader > .e-table {

  height: 142px;

}

 

If you are still facing the issue, please share an issue reproducible sample that will be helpful for us to provide a better solution as early as possible.

Regards,

Pavithra S

[TaeWook Kang]

Thank you for your answer. However, there is no change even if you use the method you told me. I will attach the cshtml file.

Attachment: Main_b96d430.zip

[Pavithra Subramaniyam]

Hi TaeWook Kang,

We are working on the reported scenario “Grid header is misaligned while adding frozen columns with stacked header” with the given example. So, we will update the further details on November 10^th , 2022. Until then we appreciate your patience.

Regards,

Pavithra S

[Pavithra Subramaniyam]

Thanks for your patience.

We suggest setting the max-height to the header cell elements to overcome the reported issue. Please refer to the below code example for more information.

.e-grid .e-stackedheader .e-columnheader.e-wrap .e-headercelldiv, .e-grid .e-stackedheader .e-columnheader.e-wrap .e-stackedheadercelldiv, .e-grid .e-stackedheader .e-columnheader.e-wrap .e-rhandler e-rcursor {

        max-height: 70px !important; // you can change this value as per your requirement

        min-height: 70px !important;

    }