TwinColSelect gets wrapped when a scrollbar is visible

Vaadin 6 / 7 / 8
1

Hi,

I’m using Vaadin 7.6.8 with the Valo theme and am facing a layouting problem, that occurs in the Chrome browser. I created a Window, that contains a TwinColSelect component, which has set a width of 100%. If the window fits into the page, then the component is displayed correctly, but if the content of the window is too high and a scrollbar appears, then the second column of the TwinColSelect gets wrapped into a new line. Interestingly, if I open a ComboBox in the same window twice, then the width of the TwinColSelect gets adapted to the available space and the two columns are displayed in one line.
Here a minimal example showing the problem:

Window window = new Window();
window.setWidth("50em");
window.setResizable(false);
window.setModal(true);

final VerticalLayout content = new VerticalLayout();
window.setContent(content);
content.setMargin(true);
content.setSpacing(true);

TwinColSelect tcSelect = new TwinColSelect();
content.addComponent(tcSelect);
tcSelect.setSizeFull();

content.addComponent(new ComboBox("Open me twice"));

for (int i = 0; i < 60; i++) {
    content.addComponent(new Label("Content, content, content..."));
}

this.getUI().addWindow(window);

Can I fix the behavior somehow or did I find a bug in Vaadin or the Valo theme? I didn’t test if other themes behave the same way.

Thanks.
Oliver

2

Hello : )
You can try(works in Chrome and FF) to fix it by adding style to your TwinColSelect as
tcSelect.addStyleName(“oneLine”);

and in SCSS file:
.oneLine{
white-space: nowrap !important;
}
Hopefully, it will help you