Alignment of Vaadin component TwinColSelect left and right buttons changes

General
1

Alignment of Vaadin component TwinColSelect left and right buttons changes on Chrome browser (Version 77.0.3865.90, 64-bit).
Move left and right buttons are shifted at the middle bottom of both list (available and selected item list).
Previously, it was working on Chrome but after an update of chrome, alignment is affected for Vaadin TwinColSelect component.
In other browsers like IE, firefox, alignment works fine.

final VerticalLayout verticalLayout = new VerticalLayout();
final TwinColSelect twinColSelect = new TwinColSelect();
twinColSelect.setSizeFull();
twinColSelect.setLeftColumnCaption(“Available”);
twinColSelect.setRightColumnCaption(“Selected”);
twinColSelect.addItems(“Mercury”, “Venus”, “Earth”, “Mars”,
“Jupiter”, “Saturn”, “Uranus”, “Neptune”);
twinColSelect.addValueChangeListener(event → {
// handle selection
});

verticalLayout.addComponent(twinColSelect);
final Panel panel = new Panel(“TwinColSelect Example”);
panel.setContent(verticalLayout);

I have attached snapshot of left and right buttons.

Thanks in advance,
Supriya

17865624.png
17865627.png

2

Just noticed this too, difference between Chrome and Safari. (Vaadin Framework version 8.9.0)

[From the sampler]
(https://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder)

It appears that Chrome may be ignoring the vertical-align? Removing this from Safari’s inspector results in what is displayed in Chrome, at least.

.admin .v-select-twincol-buttons {
    white-space: nowrap;
    display: inline-block;
    vertical-align: top;
    position: relative;
    min-width: 3.5em;
}
3

The Sampler shows the issue on both Chrome and Opera. Looks okay on Safari and Firefox.
On Vaadin 8.8.6, it looks good on all four of those browsers.

4

David Wall:
The Sampler shows the issue on both Chrome and Opera. Looks okay on Safari and Firefox.
On Vaadin 8.8.6, it looks good on all four of those browsers.

Thank you. I’ll back off a version for now.

5

Hi,

There is some longer explanation what is going on with TwinColSelect. TLDR: It is a bug in Chrome’s new layout algorithm. The algorithm can be turned of by Chrome flags. The bug has been fixed and going to be released in next versions of Chrome.

https://github.com/vaadin/framework/issues/11712

6

Thanks, Tatu. If it’s just a browser bug, why does it render okay on Vaadin 8.8.6? I am using the same Chrome browser Version 77.0.3865.90 (Official Build) (64-bit) on a Mac, and the Sampler (which I presume is on 8.9.0?) shows the issue, but my own app running on 8.8.6 does not. I didn’t want to do a Vaadin version update until this is resolved as we have a release going out this weekend.