I noticed an issue with the scrollbar

Aspose.Cells Product Family
1

I noticed an issue with the scrollbar—it overlays the viewer. When I adjust the x-spreadsheet-table style, the scrollbar moves down as expected. However, when I search for content, the highlighted area shifts unexpectedly."

style .x-spreadsheet-table{
padding-bottom: 50px;
}

image.png862×830 32.9 KB
image.png (32.9 KB)

After modifying the style the highlighted position got varied.

image.png851×842 47.2 KB
image.png (47.2 KB)

2

@sarathepiq

It appears you are encountering an issue with the scrollbar overlaying the viewer and the highlighted area shifting unexpectedly during a search. This may be related to the CSS styles applied to the .x-spreadsheet-table.

To resolve the scrollbar issue, ensure that the padding and margins are set appropriately to prevent overlap. Additionally, consider using overflow: auto; or overflow-y: scroll; on the container to manage the scrollbar behavior more effectively.

Here’s a modified CSS snippet you can try:

.x-spreadsheet-table {
    padding-bottom: 50px; /* Adjusts space for the scrollbar */
    overflow-y: auto; /* Ensures scrollbar behaves correctly */
    position: relative; /* Helps in managing positioning */
}

If the highlighted area continues to shift unexpectedly, you may need to debug the JavaScript responsible for the search functionality to ensure it accurately calculates positions after the search results are displayed.

4

@sarathepiq
Instead of applying padding-bottom directly to the internal .x-spreadsheet-table element (which breaks coordinate calculations used for rendering highlights), wrap the entire spreadsheet in a custom container and apply spacing styles to that wrapper.

<style>
.spreadsheet-container {
  padding-bottom: 50px;
  
}  
...
</style>

<div id="gridjs-demo-uid" class="spreadsheet-container">
<div class="x-spreadsheet">
....
</div>
</div>

please have a try.

5

I tried this, but it didn’t work. The scrollbar is located inside the x-spreadsheet-sheet element."

7

@sarathepiq
Now, I understand your requirement. You mean the scrollbar overlays the cell contents. Its position shall be adjusted.

We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-1913

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

1 Like
8

Thank you very much.

9

@sarathepiq
welcome