TwinColSelect broken on Edge in ValoThemeUI

[OlliTietavainenVaadin]

• Vaadin version 8.1-SNAPSHOT
• Description of the bug
  In Edge, the ValoThemeUI?#!selects test's TwinColSelect looks broken:
  

Works as expected in Chrome on Windows

[ghost]

TwinColSelect is also broken on android. Selecting items will still display 0 selected, and it also looks very bad.

[stale]

Hello there!

It looks like this issue hasn't progressed lately. There are so many issues that we just can't deal them all within a reasonable timeframe.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[imilina]

This issue is still valid for version 8.3.3, TwinColSelect is unusable on Edge.

It is easily reproducible using Edge browser, just open any page with TwinColSelect in it. For example: https://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder

When there are no items on one side, that side will have smaller height.

[TatuLund]

This issue is still valid for version 8.3.3, TwinColSelect is unusable on Edge.

What you mean by "unusable"?

I can confirm that there is visual defect with Edge, but otherwise TwinColSelect is functional. I.e. you can select options from the left etc.

[imilina]

I agree, "unusable" is bad choice of words. What I meant is that we can't deliver UI with visual defect like that to our customers. So our workaround is not using TwinColSelect, but implement our own using two ListSelect and buttons.

[TatuLund]

For some reason with Edge, the "Selected options", style name "v-select-twincol-selections" is missing "vertical-align: top;". As a workaround you could try to add this to your theme.

.v-select-twincol-selections {
vertical-align: top;
}

It should be inherited from .v-widget (which happens correctly in Chrome). It maybe issue in Valo theme somewhere, but that requires more investigation.

[imilina]

I can confirm that your css workaround works, but only if you explicitly set height to TwinColSelect with setHeight() (not with setRows()!).

With height (120px):

Without height (6 rows):

As our components are mostly fixed width and height (in pixels), this is good enough for me.
Thanks for your help.

[stale]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!

[edler-san]

This is still an issue with 8.9.0.beta3 as can be seen on https://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder

Especially in larger list this can render a complete UI useless (version 8.8.6 here)

Chrome 76.0.3809.132 (Offizieller Build) (64-Bit) is used.

[StefanPenndorf]

I think the Chrome issue is a different one as analyzed by @TatuLund in #11712.

[TatuLund]

@KyleRogers That is correct, that is why discussion was continued on different ticket.

[stale]

Hello there!

We are sorry that this issue hasn't progressed lately. We are prioritizing issues by severity and the number of customers we expect are experiencing this and haven't gotten around to fix this issue yet.

There are a couple of things you could help to get things rolling on this issue (this is an automated message, so expect that some of these are already in use):

• Check if the issue is still valid for the latest version. There are dozens of duplicates in our issue tracker, so it is possible that the issue is already tackled. If it appears to be fixed, close the issue, otherwise report to the issue that it is still valid.
• Provide more details how to reproduce the issue.
• Explain why it is important to get this issue fixed and politely draw others attention to it e.g. via the forum or social media.
• Add a reduced test case about the issue, so it is easier for somebody to start working on a solution.
• Try fixing the issue yourself and create a pull request that contains the test case and/or a fix for it. Handling the pull requests is the top priority for the core team.
• If the issue is clearly a bug, use the Warranty in your Vaadin subscription to raise its priority.

Thanks again for your contributions! Even though we haven't been able to get this issue fixed, we hope you to report your findings and enhancement ideas in the future too!