Loading...
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.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

Alignment of Vaadin component TwinColSelect left and right buttons changes

Supriya Jamble
3 years ago Sep 30, 2019 10:05am

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

Susan Osgood
3 years ago Oct 02, 2019 9:23pm

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

From the sampler

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;
}
Last updated on Oct, 2nd 2019
David Wall
3 years ago Oct 02, 2019 10:06pm
Susan Osgood
3 years ago Oct 03, 2019 3:16pm
Tatu Lund
3 years ago Oct 03, 2019 5:39pm
David Wall
3 years ago Oct 03, 2019 6:01pm