Double horizontal scroll on non-frozen SfGrid content

[Paul Hoecherl]

When configuring a grid with the left-two columns frozen, the horizontal scrollbar covering the non-frozen columns appears twice when you scroll vertically to the bottom of the grid area:

Inspecting the control, you can see that there are actually Two (2) scroll bars being rendered for this grid content container:

If the second e-movablescrollbar class is removed from the div, the scrollbar disappears, and the scrollable region appears and behaves as normal with a single scrollbar for the non-frozen column area.

Is there any way to specifically remove this second class reference?

If so, are there any side-effects?

[Naveen Palanivel]

Hi Paul Hoecherl,

Greetings from Syncfusion Support.

We have reviewed your query and observed that there appears to be a double horizontal scrollbar in the non-frozen columns of the Grid. To investigate this, we created a simple sample and tested the scenario on our end using the latest version 30.1.39. However, we were unable to reproduce the reported issue. For your reference, please find the sample below:

Sample: https://blazorplayground.syncfusion.com/embed/htroZGXazQgIWFsg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

If the reported issue still reproduced, then kindly share the below details to validate further at our end.

1. Share us the full Grid code snippet and model class.
2. Please share the NuGet package version used in your project. Also, please ensure that you have updated to the latest version(30.1.39) and confirm whether the issue still occurs.
3. Share us the video demonstration of the issue with elaborately, it will be more useful to us.
4. Share us a simple issue replicating sample or try to modify the above-mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Naveen Palanivel.

[Paul Hoecherl]

Thanks for the example!

I was able to fix the double-scroll:

1. Setting all visible columns to fixed width

2. Add the following css class to the page:

#bootstrap-overrides .e-grid.sf-grid .e-movablecontent {

    overflow-x: hidden;

    overflow-y: hidden;

}

[Naveen Palanivel]

Welcome! We’re glad to hear that the reported issue has been resolved on your end.

Kindly get back to us if you have any further queries. If your query is related to the CSS solution, please include the request details from the previous update.

As always, we are here to assist you.