search

kirjs / react-highcharts

React wrapper for Highcharts library
http://kirjs.github.io/react-highcharts/
MIT License
1.26k stars 233 forks source link

Window to Scroll Top with react-tabs #358

Closed Piero87 closed 6 years ago

Piero87 commented 6 years ago

Hi, I am using react-highcharts with react-tabs, and when i click a tab that contain an highchart the window scroll to top, any idea?

ilyjs commented 6 years ago

Show an example code. And attach dependencies.

ilyjs commented 6 years ago

@Piero87

The solution to this problem is add minHeight 

   <TabPanel>
      <div style={{ minHeight: 800 }}>
        <ReactHighcharts  config={config}  ref="chart" > </ReactHighcharts>
      </div>
    </TabPanel>

    <TabPanel>
      <div style={{ minHeight: 800 }}>
        <ReactHighcharts  config={config}  ref="chart" > </ReactHighcharts>
      </div>
    </TabPanel>

This is an example with this problem https://stackblitz.com/edit/react-highcharts-react-tabs-scroll-problem?file=TabsExample.js

This is a corrected example https://stackblitz.com/edit/fix-react-highcharts-react-tabs-scroll-problem?file=TabsExample.js