Setting the height property to the component

Gantt
#1

Hi there,

After installing the component using NPM, the next step on this tutorial shows how to create a react component for gantt.
dhtmlx.com/blog/create-react-ga … tmlxgantt/

I am having an issue when trying to configure the height property of my Div.
The tutorial is using:
style={{width: ‘100%’, height: ‘100%’}}
When I try that, only the header of the component is displayed.

If I try something like this, the component will be displayed as expected, but I get this message in the console:
style={{width: ‘100%’, height: ‘700’}}
“Warning: a div tag (owner: Gantt) was passed a numeric string value for CSS property height (value: 700) which will be treated as a unitless number in a future version of React.”

Therefore, I guess I need to change that, but it seems very weird that setting the property to “100%” won’t work.
Has anybody faced an issued like that?

#2

Hello,
Gantt inherits it’s height from the container’s height. And when you use the relative size for the container’s height - style={{width: ‘100%’, height: ‘100%’}} - container also takes it’s size from the parent element. If the parent doesn’t have the initial height specified, gantt’s height will be “0”.

As a solution, you may try to set the height of the parent object. To do that open “App.js” file, find “

” string and add the style property: 
<div className="gantt-container" style={{height:'800px'}}>

or

<div className="gantt-container" style={{height:'100vh'}}>

As for the warning - you just need to specify units for the css size. So if now you have

style={{width: '100%', height: '700'}}
[/code] change it to: [code]
style={{width: '100%', height: '700px'}}