Vaadin Timeline loses height when switching tabs

Flow
1

I have an app which contains a TabSheet. The child component for the first tab is an AbsoluteLayout,
and it contains a Vaadin Timeline positioned using percentages. In the timeline, I’ve set the browser and
some of the bars at the top to be not visible.

When the application comes up, the timeline is properly positioned. However, if I switch to another tab and
then back to the first tab, the height of the timeline has decreased appreciably and no longer fills the specified region.
Resizing the browser window causes the timeline to spring back to its correct height.

Below I’ve included a short demo program that shows the problem. The behaviour is the same in Firefox,
Chrome and IE.

Is this a known problem, or am I just making some idiot newby mistake? Is there a work-around? Any
help would be much appreciated!

[font=courier new]
package net.alethis.vaadinttest4;

import java.util.Calendar;
import java.util.Date;

import javax.servlet.annotation.WebServlet;

import com.vaadin.addon.timeline.Timeline;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.Container;
import com.vaadin.data.Item;
import com.vaadin.data.util.IndexedContainer;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme(“theme4”)
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "net.alethis.vaadinttest4.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {

    final VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    layout.setSizeFull();
    setContent(layout);

    TabSheet tabs = new TabSheet();
    layout.addComponent(tabs);

    tabs.addTab(createTab1(), "Tab 1");
    tabs.addTab(new Label("Other tab"), "Tab 2");
}

private Component createTab1() {
    AbsoluteLayout layout = new AbsoluteLayout();
    layout.setWidth("100%");
    layout.setHeight("600px");
    
    Timeline timeline = createTimeline();
    timeline.setSizeFull();
    timeline.addGraphDataSource(createContainer(), Timeline.PropertyId.TIMESTAMP, Timeline.PropertyId.VALUE);
    layout.addComponent(timeline, "top: 0%; left: 0%; right: 0%; bottom: 0%;");
    
    return layout;
}

private Timeline createTimeline() {
    Timeline t = new Timeline();
    t.setSizeFull();
    t.setChartModesVisible(false);        
    t.setCaption(null);                    
    t.setDateSelectVisible(false);        
    t.setGraphLegendVisible(false);        
    t.setZoomLevelsCaption(null);    
    t.setBrowserVisible(false);
    t.setVerticalAxisRange(0f, 10f);
    return t;
}

private Container.Indexed createContainer() {
    Container.Indexed container = new IndexedContainer();
    container.addContainerProperty(Timeline.PropertyId.TIMESTAMP, Date.class, null);
    container.addContainerProperty(Timeline.PropertyId.VALUE, Float.class, 0f);
    Calendar cal = Calendar.getInstance();
    for (int i = 0; i < 10; i++) {
        Item item = container.addItem(cal.getTime());
        item.getItemProperty(Timeline.PropertyId.TIMESTAMP).setValue(cal.getTime());
        item.getItemProperty(Timeline.PropertyId.VALUE).setValue(3f + (i%2 * 4f));
        cal.add(Calendar.DAY_OF_MONTH, 1);            
    }
    return container;        
}

}
[/font]

2

Actually, with the code I posted above, the timeline does NOT spring back to the correct size when the window is resized.
Here’s a simpler version that exhibits the original problem (the shrinking timeline) and the springback on resize.
It seems clear that when switching back to the first tab, the size is recalculated under the assumption that the
browser area and the zoom/legend bar at the top are visible - but they’re not.
Same imports as above…

[font=courier new]
@Theme(“theme4”)
@SuppressWarnings(“serial”)
public class MyVaadinUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "net.alethis.vaadinttest4.AppWidgetSet")
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
    TabSheet tabs = new TabSheet();
    tabs.setSizeFull();
    setContent(tabs);
    tabs.addTab(createTab1(), "Tab 1");
    tabs.addTab(new Label("Other tab"), "Tab 2");
}

private Component createTab1() {
    AbsoluteLayout layout = new AbsoluteLayout();
    layout.setSizeFull();
    layout.addComponent(createTimeline(), "top: 0%; left: 0%; right: 0%; bottom: 0%;");
    return layout;
}

public Timeline createTimeline() {
    Timeline t = new Timeline("A Bad Sine");
    t.setSizeFull();
    t.addGraphDataSource(createGraphDataSource(), Timeline.PropertyId.TIMESTAMP, Timeline.PropertyId.VALUE);
    t.setChartModesVisible(false);
    t.setGraphLegendVisible(false);
    t.setZoomLevelsCaption(null);
    t.setGraphLegendVisible(false);    
    t.setDateSelectVisible(false);    
    t.setBrowserVisible(false);
    t.setVerticalAxisRange(-1.2f, 1.2f);
    return t;
}

public Container.Indexed createGraphDataSource() {
    Container.Indexed container = new IndexedContainer();
    container.addContainerProperty(Timeline.PropertyId.TIMESTAMP, Date.class, null);
    container.addContainerProperty(Timeline.PropertyId.VALUE, Float.class, 0f);
    Calendar cal = Calendar.getInstance();
    cal.set(Calendar.YEAR, 2000);
    for (int i = 0; i < 360; i++) {
        // Create a point in time
        Item item = container.addItem(cal.getTime());
        item.getItemProperty(Timeline.PropertyId.TIMESTAMP).setValue(cal.getTime());
        item.getItemProperty(Timeline.PropertyId.VALUE).setValue((float)Math.sin(i*Math.PI/180));
        cal.add(Calendar.DATE, 1);
    }
    return container;
}

}
[/font]

3

hi
I’ve encountered the same issue.
When the browser is visible, the chart refreshes ok when I press f5.
When the browser is not visible, the chart area shrinks when I press f5 (vaadin 7.5.3)