We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Grid header height problem occurs when using 'frozenColumns'

Hi.


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

Grid header height.PNG


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.


4 Replies

PS Pavithra Subramaniyam Syncfusion Team November 7, 2022 01:14 AM

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



TK TaeWook Kang November 7, 2022 06:29 PM

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


PS Pavithra Subramaniyam Syncfusion Team November 8, 2022 10:28 AM

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 10th , 2022. Until then we appreciate your patience.


Regards,

Pavithra S



PS Pavithra Subramaniyam Syncfusion Team November 10, 2022 10:17 AM

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;

    }




Loader.
Live Chat Icon For mobile
Up arrow icon