Striving to maintain the absolute positioning of the right column as users scroll through the left column has proven to be a challenging task. Despite exploring various solutions from stackoverflow and google, none seem to effectively address this issue.
Below is the code snippet:
<div className="wrapper wrapper-content animated">
<div className="row">
<div className="col-lg-4 col-xl-4">
{ this.props.showController ? <ModelChartController handleChange={ this.handleChange } handleSavedUntilRetirementChange={ this.handleSavedUntilRetirementChange } handleSavedAfterRetirementChange={ this.handleSavedAfterRetirementChange }
{...this.state} /> : null }
</div>
<div className="col-lg-8 col-xl-8">
<div className="absolute-wrapper">
<div className="maintainPosition">
<ResponsiveContainer width='100%' aspect={ 21.0 / 9.0 }>
<LineChart data={ this.state.data } margin={ { top: 5, right: 30, left: 20, bottom: 5 } }>
<XAxis dataKey="Age" />
<YAxis dataKey="Total" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="Non-Retirement" stroke="#8884d8" />
<Line type="monotone" dataKey="Retirement" stroke="#82aeca" />
<Line type="monotone" dataKey="Total" stroke="#82ca9d" activeDot={ { r: 8 } } />
</LineChart>
</ResponsiveContainer>
</div>
</div>
</div>
</div>
</div>
The CSS used for styling is as follows:
.absolute-wrapper {
position: relative;
}
@media (min-width: 768px) {
.maintainPosition {
position: absolute;
top: 0;
}
}