Chart height not rendered correctly

Gantt
#1

Hi,

I am trying to use functional component instead of Class component to use Gantt.

I have followed the FAQ in here to set the CSS (html, body). Which works if I did not place (the following)

gantt.init('gantt');
gantt.parse(data);

inside useEffect.

However, doing so, I am not able to see my toolbar.

image.png1231×164 11.6 KB

After reading up more on React functional component, and hooks, I realise that gantt.init should have been inside useEffect instead (correct me if I’m wrong). So I placed it there, and now the toolbar is showing but the chart becomes 0 height.

R6iIln0.png1356×75 1.22 KB

I have tried to set the container height in CSS but to no avail.

I have setup a GitHub repo for this.

Let me know how I can adjust the CSS or something which would render the view correctly.

Thanks!

#2

Hello Joseph,
Thank you for sharing your project.
I don’t specialize in React so I won’t be able to tell you how it should work.
But I can suggest that you can specify Gantt height in CSS:

#gantt{
  height: 500px;
}

When Gantt height is 100% it checks the parent height parameter. When there is no parent, that parameter is 0.

#3

It works. But I don’t really get what you meant here. Is there any example you can provide to further explain it?

I did try to wrap a parent div before the #gantt but it doesn’t render correctly as well.

Also, what are the other way to use full height instead of specifying the px? E.g using %
Using pixel doesn’t seem flexible enough.

#4

Hello Joseph,
Here are the explanation and example:

https://files.dhtmlx.com/30d/c27205a69ad6d5147da2f69b8ccd66db/parent_div_100%_explanation_example.html

You can change that if you add the following rule:

<style>
html,body{
	height:100%;
}
</style>

https://files.dhtmlx.com/30d/7a23661f3f631e7bfa3b10dbb5f90cb3/parent_div_100%_explanation_example_fix.html

1 Like
#5

Hi ramil,

From your example, I can see and understand clearly, but when I tried it on my project, it just doesn’t work as I intended.

If you pull again my latest commit to my GitHub, I have set html, body to 100%. Added a #toolbar with a height of 100px then I want the chart to take the rest of the height. So I tried a couple of way; setting 100%, or auto does not work. It will collapse to 0px height. The only way it works is that if I use px to specify the height.

image
image870×530 1.41 KB

Can tell me why is that so? And how do I achieve the result that I want without specifying a fixed px height for the chart.

#6

Hello Joseph,
Looks like, it happens because React requires more complex structure than a regular HTML page.
You can add the following rule to the custom.css file:

#gantt {
    height: 100%;
}

Then you need to wrap Gantt into a div that will have 100% width and height and absolute positioning:

<div style={{width: '100%', height: '100%', position: 'absolute'}}>
    <GanttChart />
</div>

Here is the updated demo:
https://files.dhtmlx.com/30d/56dd4b7ecc0856805c5ed0410366e8d8/react-gantt-hook-demo-updated.zip

#7

Hello ramil,

Thanks for looking into it. It’s almost perfect but I don’t get why it would cause double scrolling to appear.

image
image833×89 963 Bytes

I tried to remove toolbar but this is still showing.

This is the full page w/o toolbar.

image
image1925×941 34.1 KB

And with toolbar, the scroll will just move downwards.

Why is there a double scrollbar at the bottom?

#8

Hello Joseph,
Looks like, it happens because there is margin for the body element. So when Gantt stretches its width to 100% of the page, it doesn’t fit the screen. If you remove the margin, the second scrollbar disappears:

body{
	margin: unset;
}
#9

Hey ramil,

Really appreciate your help. It looks good now, just that it got push down because of the toolbar I have, but that’s fine for now.

Thanks!