Freeze right column headercell width inconsistency issue
We are experiencing an inconsistency in header cell widths and the row cells when a Frozen Right column is used. This was noted in a few normal data grids, but the majority of the issues happened with the Treegrid data table version.
In the attached image (Action-column-width-align), the header cell labeled "Actions" column is shorter in width than the row cells listed below it.
After some testing, there seems to be a section of a div that accounts for additional padding in a grid that has multiple results and requires a scrollbar to appear. The width that is missing in Action-column-width-align looks to match up with the width noticed in the additional image "Action-column-width-align2".
It should be noted that these grids are generated only after a query for results is inputted in fields outside of the grid area. Some results have a single page of Tree grid with one or two results and there are multi-page results which creates the need for a scrollbar to view.
We have had to alter the grids CSS files to correct the issue but we are reaching out to understand why the default behavior of the Freeze Right columns would do this in the default settings. If there is any information you can provide it would be greatly appreciated, please let us know if you require any more documentation on your end from us regarding this.
Thanks in advance!
Attachment: Actioncolumnwidthalign2_f7c88df5.png
Hi Steve Hanson,
Greetings from Syncfusion Support.
The purpose of the padding that you see on the right side of the header is to ensure that the header table is aligned with the content table. In the Grid, by default, only the content table will have a scrollbar. Since the scrollbar occupies space in the view, it is necessary to account for this space in the header to properly align the header and content tables. However, this padding is not based on the row count and is always displayed in the Grid because the vertical scrollbar of the Grid is designed to be always visible by default regardless of the number of rows. For your reference, we have prepared a sample and a GIF demonstrating this behavior, which you can find below:
Sample: https://stackblitz.com/edit/caj8bxjv
[preview]
We understand that you are facing the reported scenario. Usually, this can occur in one of two cases:
- When using outdated/mismatched packages and theme files/CDNs.
- When the padding is overridden somewhere in the project.
Therefore, if you are using outdated or mismatched packages and themes, we recommend upgrading them to the latest version. If you are still facing the issue after upgrading, it might be related to some Grid CSS being overridden in your application. In that case, please ensure that you are not manually overriding the CSS that removes the padding.
However, if the issue still occurs after checking both scenarios, we kindly request you to reproduce the issue using the provided sample or share a sample that replicates the issue, so that we can validate it further and provide you with a better solution.
We look forward to your response.
Regards,
Santhosh I
