New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chart grows on window resize in styled mode #7494

Closed
DiegoCardoso opened this Issue Dec 6, 2017 · 4 comments

Comments

Projects
None yet
3 participants
@DiegoCardoso

DiegoCardoso commented Dec 6, 2017

This behavior is only affecting Highcharts in styled mode.
If container has no explicit height defined, Highcharts is created with a height of 400px.

Expected behaviour

Chart should keep its initial height whenever a new resize event occurs.

Actual behaviour

Chart keeps growing after any resize event (whether by resizing the window or by dispatching a new Event('resize'))

Live demo with steps to reproduce

http://jsfiddle.net/diegocardoso/c88n2o2w/1/

Affected browser(s)

Tested on latest versions of Chrome, Firefox and Safari.
Tested on latest Highcharts 5 and 6.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Dec 6, 2017

Contributor

Hi @DiegoCardoso
Thank you for the reporting.

It looks like the problem is with the functions getStyle / getChartSize().
Related issue: #4913

Contributor

sebastianbochan commented Dec 6, 2017

Hi @DiegoCardoso
Thank you for the reporting.

It looks like the problem is with the functions getStyle / getChartSize().
Related issue: #4913

@DiegoCardoso

This comment has been minimized.

Show comment
Hide comment
@DiegoCardoso

DiegoCardoso Dec 6, 2017

I just noticed that if I call getChartSize() it seems to stop growing on resize. Not sure why, though.

http://jsfiddle.net/diegocardoso/c88n2o2w/2/

DiegoCardoso commented Dec 6, 2017

I just noticed that if I call getChartSize() it seems to stop growing on resize. Not sure why, though.

http://jsfiddle.net/diegocardoso/c88n2o2w/2/

@TorsteinHonsi

This comment has been minimized.

Show comment
Hide comment
@TorsteinHonsi

TorsteinHonsi Dec 11, 2017

Collaborator

Cause

Here you see what failed - the SVG is rendered as an inline image so the space below the baseline is added to the container. Subsequently, the container offsetHeight is a little bit higher on every redraw: http://jsfiddle.net/highcharts/c88n2o2w/4/

Preliminary workaround

Add this snippet to your CSS

.highcharts-root {
    display: block;
}
Collaborator

TorsteinHonsi commented Dec 11, 2017

Cause

Here you see what failed - the SVG is rendered as an inline image so the space below the baseline is added to the container. Subsequently, the container offsetHeight is a little bit higher on every redraw: http://jsfiddle.net/highcharts/c88n2o2w/4/

Preliminary workaround

Add this snippet to your CSS

.highcharts-root {
    display: block;
}
@DiegoCardoso

This comment has been minimized.

Show comment
Hide comment
@DiegoCardoso

DiegoCardoso Dec 11, 2017

Thanks!

That also explains why the HC height was 403px by "default".

This seems to fix it.

DiegoCardoso commented Dec 11, 2017

Thanks!

That also explains why the HC height was 403px by "default".

This seems to fix it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment