The height of scrollbar is not working

Gantt Vue.js Gantt
#1

Hi,

The height of scrollbar is not working, am I missing something?

Here is my snippet:

{ view: 'scrollbar', id: 'scrollHor', group: 'horizontal', height: 20 }

The default height is 4, when I tried to update it to 20, it was not working as expected.

#2

Hello,
You need to change the scroll_size config to set a different size of the scrollbars:
https://docs.dhtmlx.com/gantt/api__gantt_scroll_size_config.html

However, the scrollbars are rendered by the browser, not by Gantt. If the height is 4, most likely, you are using Firefox that doesn’t allow customizing the width or height of the scrollbars.

For a Webkit- or Chrome- related browser, you can modify the ::-webkit-scrollbar styles.
Here are examples:
https://snippet.dhtmlx.com/5/b89d004be
http://snippet.dhtmlx.com/5/9ec8f8e62

But in Firefox, you need to enable experimental features manually:
https://www.makeuseof.com/change-firefox-scrollbar-style/
And you still don’t have much things to customize:

It is not a Gantt issue with the scrollbars for Firefox, so we cannot make it work there.

#3

Thanks ramil, scroll_size is exactly what I need.

But what does the height in scrollbar view mean?

#4

Hello,
The width and height parameters can be applied depending on the parent cell. If the parent cell has the rows type, you can add the height parameter, and the width parameter is ignored. For the cols type, you can use the width parameter, and the `height parameter is ignored.

The scrollbars usually have the same parent as the layout cell they are attached to. So the width or height parameter that could work for them is ignored.
If you find the configuration with the height parameter in the scrollbars, probably, it was used in the older versions before the scroll_size config was added.