Chart scaling with flex layout broken

Hi everyone!

We have a problem with flex layout and chart scaling.

Given is simple layout with three sections: head, content, footer.
Content is split in tree evenly distributed parts. The second part contains a chart. All three parts should grow and shrink evenly.
See image “01_after_application_start.PNG”

When making the browser window bigger all three parts increase there size.
See image “02_after_making_window_wider.PNG”

When making the browser windows smaller again the chart size does not decrease.
See image “03_after_making_window_smaller_again.PNG”

Maybe this is related to the following bug in Highcharts. See
https://github.com/highcharts/highcharts/issues/4649

We did not get the workaround described there to work.

I attached some screenshots and an example Eclipse project.

We already experimented with

  • width and height settings
  • different layouts (inline-block)
  • fixed heights

without success. We hope to get some help on this issue here.

Best wishes
Stefan

Vaadin Application

package com.example.myapplication;

import javax.servlet.annotation.WebServlet;
import com.vaadin.addon.charts.Chart;
import com.vaadin.addon.charts.model.AxisTitle;
import com.vaadin.addon.charts.model.ChartType;
import com.vaadin.addon.charts.model.Configuration;
import com.vaadin.addon.charts.model.Hover;
import com.vaadin.addon.charts.model.Labels;
import com.vaadin.addon.charts.model.ListSeries;
import com.vaadin.addon.charts.model.Marker;
import com.vaadin.addon.charts.model.MarkerSymbolEnum;
import com.vaadin.addon.charts.model.PlotOptionsArea;
import com.vaadin.addon.charts.model.States;
import com.vaadin.addon.charts.model.Subtitle;
import com.vaadin.addon.charts.model.Title;
import com.vaadin.addon.charts.model.Tooltip;
import com.vaadin.addon.charts.model.XAxis;
import com.vaadin.addon.charts.model.YAxis;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

/**
 * This UI is the application entry point. A UI may either represent a browser window (or tab) or some part of a html page where a Vaadin application is embedded.
 * <p>
 * The UI is initialized using {@link #init(VaadinRequest)}. This method is intended to be overridden to add component to the user interface and initialize non-component functionality.
 */
@Theme("mytheme")
@SuppressWarnings("nls")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final CssLayout screen = new CssLayout();
screen.addStyleName("screen");
final CssLayout head = new CssLayout();
head.addStyleName("head");
screen.addComponent(head);
final CssLayout content = new CssLayout();
content.addStyleName("content");
screen.addComponent(content);
final CssLayout footer = new CssLayout();
footer.addStyleName("footer");
screen.addComponent(footer);
final CssLayout contentLeft = new CssLayout();
contentLeft.addStyleName("content-left");
content.addComponent(contentLeft);
Label labelLeft = new Label("left content goes here");
contentLeft.addComponent(labelLeft);
final CssLayout contentMiddle = new CssLayout();
contentMiddle.addStyleName("content-middle");
content.addComponent(contentMiddle);
final CssLayout contentRight = new CssLayout();
contentRight.addStyleName("content-right");
content.addComponent(contentRight);
Label labelRight = new Label("right content goes here");
contentRight.addComponent(labelRight);
Chart chart = getChart();
contentMiddle.addComponent(chart);
setContent(screen);
}

Chart getChart() {
Chart chart = new Chart(ChartType.AREA);
Configuration conf = chart.getConfiguration();
conf.setTitle(new Title("US and USSR nuclear stockpiles"));
conf.setSubTitle(new Subtitle("Source: <a href=\"http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf\">thebulletin.metapress.com</a>"));
PlotOptionsArea plotOptions = new PlotOptionsArea();
plotOptions.setPointStart(1940);
Marker marker = new Marker();
marker.setEnabled(false);
marker.setSymbol(MarkerSymbolEnum.CIRCLE);
marker.setRadius(2);
States states = new States();
states.setHover(new Hover(true));
marker.setStates(states);
plotOptions.setMarker(marker);
conf.setPlotOptions(plotOptions);
XAxis xAxis = new XAxis();
Labels labels = new Labels();
// Display x axis value (year) as non formatted integer
labels.setFormatter("this.value");
xAxis.setLabels(labels);
conf.addxAxis(xAxis);
YAxis yAxis = new YAxis();
yAxis.setTitle(new AxisTitle("Nuclear weapon states"));
labels = new Labels();
// display y axis value in kilos as there is such a pile of weapons
labels.setFormatter("this.value / 1000 +'k'");
yAxis.setLabels(labels);
conf.addyAxis(yAxis);
Tooltip tooltip = new Tooltip();
tooltip.setFormatter("this.series.name +' produced <b>'+ Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x");
conf.setTooltip(tooltip);
final Number usaNumbers = new Number {null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640, 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126, 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662, 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605, 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586, 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950, 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104};
conf.addSeries(new ListSeries("USA", usaNumbers));
final Number ussrNumbers = new Number {null, null, null, null, null, null, null, null, null, null, 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322, 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478, 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049, 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000, 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000, 21000, 20000, 19000, 18000, 18000, 17000, 16000};
conf.addSeries(new ListSeries("USSR/Russia", ussrNumbers));
chart.drawChart(conf);
return chart;
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}

styles.scss

@import "mytheme.scss";
@import "addons.scss";
// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss
.mytheme {
  @include addons;
  @include mytheme;
  .screen {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
  }
  
  .head {
flex-grow: 1;
background-color: blue;  
  }
  .content {
flex-grow: 1;
background-color: gray;
display: flex;  
  }
  
  .content-left {
flex-grow: 1;
background-color: cyan;
  }
  .content-middle {
flex-grow: 1;
background-color: red;
  }
  .content-right {
flex-grow: 1;
  background-color: dark-gray;
  }
  .footer {
flex-grow: 1;
background-color: yellow;  
  }
}

Here are the attachments
34501.png
34502.png
34503.png
34504.zip (68.1 KB)