Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
TwinColSelect gets wrapped when a scrollbar is visible
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
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