Reduce Scroll bar dimensions

posted on January 27th, 2021

Answered

Tanushree asked on January 27, 2021

Hello team,
Is there a way to reduce the scroll bar dimensions on the FM grid:

Currently the vertical scroll width is 17px, need to bring it down to 15px.
Horizontal scroll height is 17px, need to bring it down to 15px.

Attached screenshot for reference.
Thanks,
Tanushree

Attachments:
FM-Scollbar.png

3 answers

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ 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

Public

Tanushree ⋅ 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.

Attachments:
cell-without-border-at-trailing-end-on-scroll-dimension-decrease.png

Public

Illia Yatsyshyn ⋅ Flexmonster ⋅ 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

Reduce Scroll bar dimensions

3 answers

Please login or Register to Submit Answer