Layout with Gantt sizing issue

Suite and Optimus Suite 6
#1

I have an issue where the initial size of the gantt container is too large after the gantt is initialized, this means that scroll bars (although visible after zoom) are not shown as they are off the screen. Minimisng and then maximising the screen sorts out the issue - is there something worng with my config or is this a bug?

This page shows the problem:
test.html (2.9 KB)

Initially the gantt is pushed of the page like this:

DHXLayout%201
DHXLayout%2011913×972 16.3 KB

After minimising the gantt is still too large:

DHXLayout%202
DHXLayout%2021639×781 18.1 KB

After maximising the problem has been rectified and the gantt/container is now the right size:

DHXLayout%203
DHXLayout%2031916×970 17.1 KB

#2

Unfortunately the problem cannot be reproduced locally with the latest suite (6.3.1) and gantt (6.3.4).
IF the problem still occursf or you please, try to use the latest versions, or provide a complete demo/demo link, where the problem can be reconstructed locally.

#3

I have upgraded to suite (6.3.1) and gantt (6.3.4) and I still see scrolling issues.

  1. Run the test page and click zoomin twice, no scrollbar is thrown, if the window is minised and then maximised then the scrollbar shows.

  2. I also noticed that gantt.config.autoscroll = true seems to have no effect ie. I cannot drag task durations outside of the grid area.

test.html (7.9 KB)

#4

Hello Alwin, Looks like the issue occurs because you add the 100% value for all elements. In case if there is a regular div element instead of Gantt, notice what happens with these settings: Screenshot by Lightshot If there are some elements above Gantt, it will never fit the screen, because its height is 100% . When you enter the fullscreen mode, Gantt detects that the container size is changed, so it stretches to fit the available width. So, with that configuration, the scrollbar is not supposed to be displayed.

But if you change Gantt height to 80% it will work correctly:

{  
  id: "pMain",
  html: "<div id='gantt_here' style='width:80%; height:80%; border:dashed gray'>",
  height: "100%",
}

I also noticed that gantt.config.autoscroll = true seems to have no effect ie. I cannot drag task durations outside of the grid area.

Thank you for informing about that, looks like we need to update the documentation. It doesn’t work because of the scrollbar names. The auto-scroll feature uses the reserved IDs: Gantt Layout Gantt Docs When you use the scrollHor name, it works correctly.

#5

I have tried using ‘scrollHor’ name for the timeline scrollX and still cannot get autoscroll to work - can you point me to a working sample pls?

#6

Hello Alwin,
Here is the demo file:
https://files.dhtmlx.com/30d/498affe62e2b8006d82d87f1a09e02ef/test_updated.html

#7

Thanks, I tried the file but it is not working (tried Edge and Chrome).
When I open the page I try to drag start or end or entire task to outside the gantt area but is is stopped at either edge (I am working in the gantt area with the blue block named ‘Test Task’) ie. I cannot go past ‘Week#02’ or ‘Week#07’ - this is what autoscroll is meant to do right?

#8

Hello Alwin,
No, it is a different thing.
Autoscroll allows you to scroll the timeline while dragging a task. But it works only within the displayed date range, it doesn’t extend the timeline.

If the date range is not specified, you need to call the gantt.render() command while dragging a task. If it is specified, you need to update the gantt.config.start_date or gantt.config.end_date parameter.
Here are examples of how it might be implemented:

No date range, only task drag:
http://snippet.dhtmlx.com/2dab5036e
No date range, task drag + task resize:
http://snippet.dhtmlx.com/9db277ac4

With the date range, only task drag:
http://snippet.dhtmlx.com/3d2f4adcf
With the date range, task drag + task resize:
https://snippet.dhtmlx.com/69e9538a9