Hide horizontal scrool bar

Gantt
#1

Hi, I want to ask it is posible to hide horizontal scrool bar on the Gantt Chart.

I tried whit:

.gantt_hor_scroll { display: none; }

but whit this I hide scrool bar for both Gantt(I have two gantt chart on the page). Any way to hide only scroll bar for te first gantt?

T1
T11153×725 6.03 KB

Thank you in advance

#2

Hello Leon,
You can use the selector to hide the elements of the first Gantt. For example:

#gantt_1 .gantt_hor_scroll { 
     display: none; 
};

Here is the snippet:
http://snippet.dhtmlx.com/57d97dec5

#3

It works!!

Thank you Ramil.

#4

Dear Ramil,

In extension on this question I have another issue and i will be appreciated your help.
I hide the toolbar but still I have big white area in the place of the scroll bar ( screenshot bellow).
Is there a way to remove this(to be cover with the gantt grid cells area) or expand over the grid data area.

image
image1589×298 11.8 KB

Regards,
koda5

#5

Hi,

Gantt still allocates space for a scroll bar in the layout, even then the actual scrollbar is hidden via css.

I think you can do a small workaround to bypass this - you redefine the layout config and wrap the scrollbar cell with another container and set the height of that container to 1px (the config doesn’t accept zero height).
Then, if you hide that element via css, the empty area will be only 1px, which should be much better then what you have now.

gantt.config.layout = {
  css: "gantt_container",
  rows: [
    {
      css: "top-gantt-layout",
      cols: [
        {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollVer"}
      ]
    },
    {
      css: "hidden-scrollbar",
      height: 1, 
      rows: 
         [
            {view: "scrollbar", id: "scrollHor"}
         ]
    }
  ]
}

Live demo: http://snippet.dhtmlx.com/30e0c2e06

Alternatively, you could just remove the horozintal scrollbar from the layout config https://docs.dhtmlx.com/gantt/desktop__layout_config.html#defaultlayout:

gantt.config.layout = {
  css: "gantt_container",
  rows: [
    {
      cols: [
        {view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollVer"}
      ]
    }
  ]
};

http://snippet.dhtmlx.com/3e89d00b2

However, but this would disable horizontal scrolling in the upper gantt chart completely, meaning that you wouldn’t be to change the position of horizontal scroll via gantt.scrollTo, which is not what you want.

#6

Dear Aiaksandr,

This definitely works!! :slight_smile:

Thank you.