autosize

Passt die Größe des Gantt-Diagramms automatisch an, um alle Aufgaben ohne Scrollen anzuzeigen

boolean| string autosize;

Values

"y" (oder true), "x", "xy"

Example

gantt.config.autosize = "xy";
 
gantt.init("gantt_here");

Default value:

false

Details

Die Einstellung 'autosize' steuert, ob das Gantt-Diagramm seine Daten innerhalb der Container-Dimensionen mit internen Scrollbars anzeigt oder die Container-Größe so anpasst, dass alle Daten ohne internes Scrollen sichtbar sind:

Beispiel mit Gantt-Div-Größen, die via CSS gesetzt sind – interne Scrollbars erscheinen bei Bedarf
Beispiel, bei dem die Gantt-Div-Größen von einer Komponente berechnet werden – interne Scrollbars sind deaktiviert

Wenn das Gantt-Diagramm in einen bestimmten Bereich der Seite passen soll, muss die Container-Größe manuell verwaltet werden:

autosizing sollte deaktiviert sein
die Breite und Höhe des Divs sollten entweder durch das HTML-Layout bestimmt werden, wenn eine responsive Layout-Lösung verwendet wird, oder durch eigenen Code.

Scrollen zu versteckten Elementen

Standardmäßig scrollt Gantt automatisch, wenn die Methoden showTask oder showDate verwendet werden. Wenn jedoch autosize aktiviert ist, vergrößert Gantt stattdessen die Container-Größe, um das Element auf der Seite sichtbar zu machen, anstatt zu scrollen.

Es gibt keine universelle Lösung dafür, da die Seite auch andere Elemente enthalten kann, die gescrollt werden müssen. Die Lösung hängt also vom jeweiligen Seiten- oder Anwendungs-Setup ab.

In einem einfachen Setup kann Gantt vor oder nach anderen Elementen positioniert sein, und das Scrollen der Seite funktioniert problemlos.

In einem komplexen Setup kann der Gantt-Container innerhalb anderer Container verschachtelt sein, die selbst wiederum verschachtelt sind. In solchen Fällen muss man nur die relevanten Elemente manuell scrollen.

Eine Möglichkeit, die Seite zum gewünschten Element zu scrollen, ist die Verwendung der Methode element.scrollIntoView:

var attr = gantt.config.task_attribute;
var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
if(timelineElement)
    timelineElement.scrollIntoView({block:"center"});

Hierbei bezieht sich id auf die anzuzeigende Aufgaben-ID.

Eine weitere Option ist, die Methode showTask oder showDate von Gantt zu überschreiben:

var showTask = gantt.showTask;
 
gantt.showTask = function(id){
  showTask.apply(this, [id]);
  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
  if(timelineElement)
    timelineElement.scrollIntoView({block:"center"});
};

Alternativ kann man auch eine eigene Funktion erstellen, um die Aufgabe anzuzeigen:

function showTask(id){
  gantt.showTask(id);
  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
    if(timelineElement)
      timelineElement.scrollIntoView({block:"center"});
}