asked on January 27, 2021
Hello team,
Is there a way to reduce the scroll bar dimensions on the FM grid:
Attached screenshot for reference.
Thanks,
Tanushree
⋅ January 28, 2021
Hello,
Thank you for your question.
We suggest checking out the following example that demonstrates changing the scrollbar styling: https://jsfiddle.net/flexmonster/yrsq5eg2/.
It uses the following set of CSS rules:
:root {
--scrollbar-width-height: 15px; //desired width of the scrollbar
}
.fm-scroll-pane::-webkit-scrollbar {
background: #fff;
width: var(--scrollbar-width-height);
height: var(--scrollbar-width-height);
}
.fm-scroll-pane::-webkit-scrollbar-thumb {
background: #c5c5c5;
}
.fm-scroll-content[style*="17px"] {
right: var(--scrollbar-width-height) !important;
bottom: var(--scrollbar-width-height) !important;
}
Please note that this approach is not relevant for IE and Firefox browsers because of the specific rendering engines they use.
Please let us know if it works for you.
Our team is looking forward to your feedback.
Kind regards,
Illia
⋅ January 28, 2021
Thanks Illia for your quick response!
This does help in reducing the scroll dimensions.
However, I have noticed that after decreasing the scroll width on right, all cells border in last column gets chipped off.
Is there a way we can have continuous cell border when the scroll width/height is reduced?
Attached screenshot for reference.
⋅ January 28, 2021
Hello,
Thank you for your feedback.
We want to explain that your screenshot's highlighter part represents an actual scrollbar with a white background color. Try commenting the CSS rules to see the same behavior of the default scrollbar.
You can adjust CSS styling so that it matches the default one (gray background of the scrollbar):
.fm-scroll-pane::-webkit-scrollbar {
background: #f1f1f1;
...
}
We have complemented the provided JSFiddle for the demonstration.
Please let us know if it works for your case.
Kind regards,
Illia