Frozen column header title sets height inline after reload of page.

[Steve Hanson]

I have frozen a column to the right of the grid but every time I reload the page, it sets an inline style for the height of the frozen e-columnheader.

I do have some SCSS calc viewport height stylings included to keep the grid above the fold, but I do not feel that should cause the e-columnheader to randomly add a height style on a reload. 

Is there a way to set the columnheader heights to a fixed height? 

[Pavithra Subramaniyam]

Hi Steve Hanson,

We need some more information from your end for better understanding. So could you please share the below details which will be helpful for providing a better solution as early as possible?

1. Share the pictorial representation /video demo of the issue and the expected result.
2. Share the full Grid code example.
3. Share the applied SCSS calc viewport height code.
4. Share an issue reproducible sample if possible.

Regards,

Pavithra S

[Steve Hanson]

Hi there, here is what I'm seeing when the page loads.

The intention is to have the grid wrapped in a responsive parent div ("grid-height") that includes a css calc parameter that is set for it to adjust for the top headers above it. The simple code would look as such:

<div class="grid-height">

<ejs-grid height="100%"></ejs-grid>

</div>

SCSS is as follows:

.grid-height {

height: auto !important;

max-height: calc(100vh - 186px) !important;

* .e-content {

max-height: calc(100vh - 336px) !important;

}

}

Also, I've found I need to also set the default "e-content" height since it does not like or read the calc css in the parent div... If there is a way to not touch "e-content" it would be preferred, but different resolutions need different viewport height calcs. There is no way to just set it as since it will either be short or go way past the fold.

For the reload of the same page, this is the results I get:

Not sure why the frozen column header is trying to set itself as various numerical values on a reload. But this should be the intended look of the results, where the grid stops prior to the fold and allows for scrolling within the grid.

Hope this helps show you what is happening. I would like to:

1. Find out why this is happening
2. Find a way to not tamper with "e-content" css stylings but make it responsive to different resolutions

3. See if there is a header column condition I can use to set the max height (similar to args.rowHeight = "123";)

Thanks for your help!!

[Pavithra Subramaniyam]

Hi Steve,

Thanks for sharing the details.

From the shared sample, we could see that setting height to the “e-columnheaader” causes the reported behavior. From the given code example, we could not reproduce the issue at our end. So please share the original Grid code example, video demo for the issue replication and the Syncfusion package version or a runnable sample with the issue to validate the issue further.

However, you can control the Grid header height by setting the below style.

.e-grid .e-columnheader {

    height: 42px !important;

}

 

Regards,

Pavithra S