search

MaTeMaTuK / gantt-task-react

Gantt chart for React with Typescript
MIT License
908 stars 501 forks source link

Horizontal scroll bar issue for chart #115

Open suniltayal opened 2 years ago

suniltayal commented 2 years ago

Hi @MaTeMaTuK, @maberalc

I am using gantt chart with unlimited height. when I have too much data, then scrollbar is getting set at the bottom of the element. I would like to show horizontal scrollbar at the bottom of screen, not at the bottom of element.

Any thought on this.

Thank you,

lordphnx commented 2 years ago

Quick local fix for me, just add a little bit of CSS

._2k9Ys{
    position: fixed;
    bottom: 0;
}

Where _2k9Ys is the classname of the scrollbar wrapper

suniltayal commented 2 years ago

Thanks Lordphnx for your comments. this is dynamic class ._2k9Ys, so can not rely on this.

I did below work around for this to fix. Added ganttHeight function to component

<Gantt tasks={tasks} viewMode={view} onExpanderClick={handleExpanderClick} listCellWidth={"200px"} columnWidth={columnWidth} fontFamily={"Roboto"} onClick={props.clickHandler} TaskListTable={TaskListTable} TooltipContent={Tooltip} ganttHeight={handleChartHeight()} />

handleChartHeight = () =>{ let windowInnerHeight = window.innerHeight; return windowInnerHeight - 50; }

So basically I am fixing the gantt chart height based on the window inner height. Why I am deducting 50 here because I am plotting chart after my header and my header height is 50.

It is working well for me.