Adding height to horizontal scrollbar breaks it

Gantt
#1

I’ve tried adding height to the horizontal scrollbar so that it’s visible to users who might not know about the shift+scroll.

When I add the following style:

  .gantt_hor_scroll {
    height: 25px !important;
  }

It works, but makes it so that vertically scrolling to the bottom of the gantt chart cuts off the last item.

See attached animated gif.

How can I properly style the bottom scrollbar without affecting the scrolling cut off of the main gantt chart?

#2

Hello,

The horizontal scrollbar is added automatically. Perhaps you have set additional css styles which overlap default Gantt styles. Please, check it.

We tried to reproduce the issue, and the last event is displayed as expected:
docs.dhtmlx.com/gantt/snippet/553413b6
Did we miss something?

#3

Hi - it seems your sample has the same issue as mine. Try scrolling to the bottom - it forces to bottom initially, but then jumps back up.

See attached gif.

#4

Hi,
Please specify browser you use.

#5

Chrome 57, OSX

#6

Please try to update your version of Gantt and check if the issue still occurs.
I sent you a link in private messages.

#7

Unfortunately, issue is still happening in new version. I’ve opened a ticket in the meantime.

#8

Hello !
I’m experiencing a similar problem.
In my gantt chart i have dynamically row heights (sets row hight via div-id). The gantt.config.row_height is constant tho. And i think the area which can be visited by scrolling is limited by the number of rows times the constant row_height. So i’m limited to scroll down. When i force to scroll down it jumps back to the “limited scroll area”.

How can i set the “scrollable-area” to something bigger, so i can see my whole chart?

Edit: god… after several hours of research i figured it out :smiling_imp: :mrgreen: godmode

In my js-file somwhere i had to define :
gantt.config.customMaxRowHeight = variable; // variable represents the height of all my dynamic rows… f.e. 1000

In dhtmlxgantt.js on line 10888 changed this:

var task_data_height;
if(this.config.customMaxRowHeight) {
task_data_height = this.config.customMaxRowHeight;
} else {
task_data_height = this.config.row_height*this._order.length;
}

Before my changes it looked like this:
var task_data_height = this.config.row_height*this._order.length;

I hope this helps someone in the future. And it would be nice if you implement dynamic row_height stuff in the next update :slight_smile:
Greetings fr0sty