Problem with scrollable panel & 100% wide panel content

I have a problem with a scrollable panel which’s content should use 100% of the width of the panel.

I want to have a panel which is scrollable and of a defined width. Inside the panel I want another panel which’s content should use 100% of the width of the outer (scrollable) panel. If the content in this inner panel gets too high for the outer panel, a vertical scrollbar should appear on the outer panel.
My problem is now, that the inner panel gets too high if the scrollbar appears the first time.

To reproduce, create a Vaadin project with the application class from below. Click the button until a scrollbar appears on the outer panel. The panel is now too high. As soon as you go with the mouse over the panel, the panel gets less height again. However, the empty space stays there. If you click the button again, everything is fine again. (See also the screenshots illustrating the problem).


import com.vaadin.Application;
import com.vaadin.terminal.Sizeable;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Button.ClickListener;
import com.vaadin.ui.ComponentContainer;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class DemoApplication extends Application {

	private static final long serialVersionUID = 1L;

	@Override
	public void init() {
		Button button = new Button("click me");

		//case 1
		ComponentContainer panelContent = new VerticalLayout();
		//case 2
//		ComponentContainer panelContent = new VerticalLayout();
//		panelContent.setSizeUndefined();
		//case 3
//		ComponentContainer panelContent = new CssLayout();
//      panelContent.setWidth(100, Sizeable.UNITS_PERCENTAGE);
		//case 4
//		ComponentContainer panelContent = new CssLayout();

        Panel panel = new Panel(panelContent);
        panel.addComponent(new Label("some content"));

        final Panel scrollablePanel = new Panel();
        scrollablePanel.setScrollable(true);
        scrollablePanel.setWidth(400, Sizeable.UNITS_PIXELS);
        scrollablePanel.setHeight(100, Sizeable.UNITS_PERCENTAGE);
        scrollablePanel.addComponent(panel);

        VerticalLayout windowContent = new VerticalLayout();
        windowContent.setSizeUndefined();
        windowContent.setHeight(100, Sizeable.UNITS_PERCENTAGE);
        windowContent.addComponent(scrollablePanel);
        windowContent.addComponent(button);

		button.addListener(new ClickListener() {
			private static final long serialVersionUID = 1L;

			public void buttonClick(ClickEvent event) {
				Label label = new Label("added");
				scrollablePanel.addComponent(label);
			}
		});

		Window mainWindow = new Window();
		mainWindow.setContent(windowContent);
		setMainWindow(mainWindow);
	}
}

I figured out so far, that the problem does not occur if the content of the inner panel has not 100% width in Java (case 2 and 4 from the example do not show this defect, case 1 and 3 do). However, that is not an option, as I need the inner panel’s content to use 100% of the width.
It does also not occur if I set on v-panel-content of the inner panel overflow=hidden (it is auto per default). But then, the content is “overlayed” by the scrollbar…

This occurs in IE (IE9), but not in FF, Chrome, or Safari. I’m using Vaadin 6.8.2.

Does somebody have an idea how to solve it? Is it a bug or am I not using the Vaadin components correctly?
Thanks for your help.

  1. Screenshot: the application looks like this when freshly started.
  2. Screenshot: no need for a scrollbar yet, everything is fine until here.
  3. Screenshot: the scrollbar appeared. The panel is now too high.
  4. Screenshot: The panel gets its correct height, if I move the mouse over the panel. However, the unnecessary space is still there…
  5. Screenshot: If the button is clicked again, i.e., another element is added below the outer (scrollable) panel, the layout is ok again.
    12519.png
    12520.png
    12521.png
    12522.png
    12523.png