display:none is not freeing up the space in firefox - css

Question

I am using react.js for displaying some data. I have more than one divs one below other. and each div contain graph, created from chart.js. I have one button in every div to display or hide that particular chart. It is working nicely. But when I hide that graph, my firefox is still not freeing up the space which was taken by chart when it was getting displayed. Like when I am hiding my chart, the space is getting created between two divs. The code is working properly in Microsoft Edge browser.
Here is my code:
var Div= React.createClass({
getInitialState: function () {
return {
displayChart: false
};
},
chartClick: function () {
this.setState({
displayChart: !this.state.displayChart,
});
},
render: function() {
return (
<div>
<p className="text-justify">
{ this.props.detail }
</p>
<button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>
{ this.state.displayChart ?
<ChartGraph id={this.props.id} />
: null }
</div>
);
}
});
Chart Component is :
ChartGraph = React.createClass({
onLoad: function () {
var barChartData = {
labels: [ option1, option2 ],
datasets: [
{
data: [451, 145],
fillColor: "rgba(46,145,202,0.8)",
strokeColor: "rgba(46,145,202,0.8)",
highlightFill: "rgba(46,145,202,1)",
highlightStroke: "rgba(46,145,202,1)"
}
]
};
var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
new Chart(ctx).HorizontalBar(barChartData, {
scaleGridLineWidth: 1,
scaleShowGridLines: false,
scaleStartValue : 0
});
},
componentDidMount: function() {
this.onLoad();
},
render: function () {
return (
<div className="red">
<canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
</div>
);
}
});
Any help for this problem?
Thank you..

Answer 1

This should work.
var Div= React.createClass({
getInitialState: function () {
return {
displayChart: false
};
},
chartClick: function () {
this.setState({
displayChart: !this.state.displayChart,
});
},
render: function() {
var hideChart = this.state.displayChart ? false : true;
return (
<div>
<p className="text-justify">
{ this.props.detail }
</p>
<button type="button" className="btn btn-link" onClick={ this.chartClick }>Chart</button>
<ChartGraph id={this.props.id} hide={hideChart} />
</div>
);
}
});
and
ChartGraph = React.createClass({
onLoad: function () {
var barChartData = {
labels: [ option1, option2 ],
datasets: [
{
data: [451, 145],
fillColor: "rgba(46,145,202,0.8)",
strokeColor: "rgba(46,145,202,0.8)",
highlightFill: "rgba(46,145,202,1)",
highlightStroke: "rgba(46,145,202,1)"
}
]
};
var ctx = document.getElementById("canvas_poll"+this.props.id).getContext("2d")
new Chart(ctx).HorizontalBar(barChartData, {
scaleGridLineWidth: 1,
scaleShowGridLines: false,
scaleStartValue : 0
});
},
componentDidMount: function() {
this.onLoad();
},
render: function () {
if (this.props.hide) return null;
return (
<div className="red">
<canvas id={"canvas_poll"+this.props.id} height="100" width="400"></canvas>
</div>
);
}
});