TwinColSelect unbalanced in Firefox

Below is a simple demo program showing a possible problem with TwinColSelect.
When it comes up in Firefox, the list on the right is noticeably shorter than the one on the left.
It works fine in IE and Chrome, however. See the attached image, which shows the UI in
IE, Chrome and Firefox, respectively from left to right.

Note that the list on the right gets resized as soon as something is selected. I tried selecting
something, then unselecting it, but that had no effect.

Is there a way to get around this issue?

Here’s the demo program. It was run with Vaadin 7.2.2.

[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) {
    VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);
    
    TwinColSelect select = new TwinColSelect();
    select.setLeftColumnCaption("LEFT");
    select.setRightColumnCaption("RIGHT");
    for (int i = 0; i < 10; i++) {
        select.addItem(String.valueOf(i));
    }
    layout.addComponent(select);
}

}
[/font]
15612.png

There seems to be
#9930
about the issue. It seems to be a bit old.

I don’t see the problem in the
TwinColSelect book examples
. The examples currently use the Valo theme and 7.3.0-SNAPSHOT, so it could be that the problem has disappeared, is theme dependent, or only occurs if either of the boxes is empty.

You might be able to work around the problem with CSS, but I can’t give advice as I don’t get it myself.