[MGNLUI-5249] Twin column field: issue with scroll bar & alignment on Chrome Created: 17/Jun/19  Updated: 13/Feb/20  Resolved: 09/Jan/20

Status: Closed
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: 6.2

Type: Bug Priority: Neutral
Reporter: Simon Lutz Assignee: Oanh Thai Hoang
Resolution: Fixed Votes: 0
Labels: M6-UI-1
Remaining Estimate: 0.25d
Time Spent: 0.25d
Original Estimate: Not Specified

Attachments: PNG File image (1).png    
Issue Links:
causality
duplicate
is duplicated by MGNLUI-5573 TwinColSelect field doesn't display s... Closed
relation
is related to MKTAUT-75 TwinColumn must binding JCR data corr... Closed
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Epic Link: M6 UI & UX Improvements
Sprint: Add-Ons 28
Story Points: 3

 Description   
  • Scrolling within a box doesn't work
    • Workaround: use keyboard arrows
    • Exists on Chrome & Firefox
    • Does not exist on Safari

      This is because of overflow:auto; somehow the scrollbar appears after the component is loaded and changes width. Setting to overflow:scroll fixes that, but then the scrollbar is always visible

  • Boxes are not aligned: issue on Chrome, see screenshot
    • Exists on Chrome
    • Does not exist on Firefox & Safari

The root cause (in resurface theme module at src/main/resources/VAADIN/themes/resurface/twincolumn.scss):

  .v-select-twincol {
    height: 100%;
    vertical-align: text-top;

    select {
      ....
      overflow-y: hidden; <-----
      ...
    }

Generated at Mon Feb 12 09:24:39 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.