Gwt Google Charts Grow But Don't Shrink

I'm using GWT (version 2.7) and the Google Charts JavaScript API to draw a series of charts inside a GWT application. I'm trying to display multiple charts in a scroll panel, with

Solution 1:

You may need to wrap your calls to draw charts in a Scheduler. They are made before Window > DockLayoutPanel > ScrollPanel chain has a chance to resize.

Alternatively, if you support only modern browsers, I would recommend moving to a flexbox layout model, which is much more efficient and flexible (pun intended) as it uses native browser reflow instead of JavaScript.

EDIT:

The solution was to replace VerticalPanel with FlowPanel.

VerticalPanel extends CellPanel, which resolves to a table in HTML. It has a different layout mechanism than a simple div, and generally should be avoided unless there is a very specific reason to use it and no CSS-based solution is available. In general, we should try to stay as close to browser native layout mechanism (FlowPanel, HTMLPanel, CSS) as possible both for performance reasons and to get predictable consistent behavior. Once you mix native and JS-forced layouts, you have to be very careful about the sequence of events as changes made by JS code (e.g. resizing an element) may force the browser to reflow/re-render the entire page again, which may in turn result in more JS changes through ProvidesResize/RequiresResize mechanism implemented in many widgets (DockLayoutPanel, ScrollPanel, etc.)