Problem/Motivation

Multi-select (combobox) list items "escape" bounding box in off-canvas forms in Chrome. This happened in the past: #3043467: Multi-select list items "escape" bounding box in Off-Canvas Forms when using WebKit and Mozilla based browsers, but it looks like it broke again at some point. Perhaps due to #2958588: Off-canvas style resets are overriding styles (especially SVGs) resulting in display issues, I'm not sure.

A combobox in the off-canvas dialog with elements overflowing

It looks fine in FireFox.

Steps to reproduce

  1. Install fresh site from 9.x and use "Standard" profile
  2. Enable Layout Builder
  3. Add at least 5 terms to the existing "Tags" vocabulary
  4. Add a custom block type and add a term reference field to the tags vocabulary. Allow unlimited items
  5. Update form display widget for that block type to use a select list
  6. Enable layout builder for the existing "Basic Page" content type default entity view display
  7. Edit layout, add block, and select "Add Custom Block"
  8. Add the new block you created, and observe the issue

Proposed resolution

Apply "overflow: auto" to "#drupal-off-canvas select[multiple]" fixes it

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#10 after patch.png19.58 KBakhildev.cs
#10 before patch.png18.67 KBakhildev.cs
#9 interdiff_2-8.txt1.36 KBjeremyvii
#9 3215517-8.patch2.72 KBjeremyvii
#6 After Patch 3215517 one.png479.48 KBchetanbharambe
#6 After Patch 3215517.png495.14 KBchetanbharambe
#6 Before Patch 3215517.png477.14 KBchetanbharambe
#4 3215517-4.patch1001 bytesgauravvvv
#3 Screenshot 2021-09-14 at 11.37.00 AM.png30.51 KBgauravvvv
#3 interdiff-3215517-2_3.txt1.03 KBgauravvvv
#3 3215517-3.patch1001 bytesgauravvvv
#2 3215517-2.patch830 bytessagarchauhan
#2 3215517-2-after-patch.jpg30.03 KBsagarchauhan
#2 3215517-2-before-patch.jpg21.52 KBsagarchauhan
Screen Shot 2021-05-24 at 1.48.24 PM.png16.54 KBbkosborne

Comments

bkosborne created an issue. See original summary.

sagarchauhan’s picture

sagarchauhan commented
Status: Active » Needs review
StatusFileSize
new 3215517-2-before-patch.jpg21.52 KB
new 3215517-2-after-patch.jpg30.03 KB
new 3215517-2.patch830 bytes

Adding patch as per Proposed resolution

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3215517-3.patch1001 bytes
new interdiff-3215517-2_3.txt1.03 KB
new Screenshot 2021-09-14 at 11.37.00 AM.png30.51 KB

Rather than making overflow scroll, we can wrap the text.
Adding after-patch screenshot and interdiff as well. Please review.

After patch, with word wrap.

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3215517-4.patch1001 bytes
abhijith s’s picture

abhijith s commented
StatusFileSize
new 3215517-before_patch.jpg22.83 KB
new 3215517-after_patch.jpg23.09 KB

Applied patch #4 and it solves the problem with multi-select box in layout builder.

Adding screenshots.
Before patch:
before

After patch:
after

RTBC +1

chetanbharambe’s picture

chetanbharambe commented
Status: Needs review » Needs work
StatusFileSize
new Before Patch 3215517.png477.14 KB
new After Patch 3215517.png495.14 KB
new After Patch 3215517 one.png479.48 KB

Verified and tested patch #4.
Patch applied successfully but not working as expected.

Testing Steps:
# Goto: 9.3.x-dev version with Seven theme
# Goto: Extend -> Enable Layout Builder
# Add at least 5 terms to the existing "Tags" vocabulary - "admin/structure/taxonomy/manage/tags/overview"
# Add a custom block type and add a term reference field to the tags vocabulary. Allow unlimited items
# Update form display widget for that block type to use a select list
# Enable layout builder for the existing "Basic Page" content type default entity view display
# Edit layout, add a block, and select "Add Custom Block"
# Add the new block you created and observe the issue

Expected Results:
# Created taxonomy terms should not be broken and they should not go outside of the box
# There should be some vertical scrolling effect for created taxonomy vocabularies.

Actual Results:
# Currently taxonomy terms are going to outside of the box
# There is no vertical scrolling effect for taxonomy terms if there are more than 8-9 vocabularies.

Please refer attached screenshots for the same.
Not working as expected.
Can be a move to Needs Work.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review

This is a separate issue, you can open a follow-up issue for that. this issue can be seen in the before patch screenshot as well.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

jeremyvii’s picture

jeremyvii commented
StatusFileSize
new 3215517-8.patch2.72 KB
new interdiff_2-8.txt1.36 KB

I believe the best course of action for this issue is to apply overflow: auto to #drupal-off-canvas select[multiple]. The purpose of the off-canvas.reset.css file is to reset the off canvas dialog back to the browser defaults, and overflow: auto achieves this.

I created a new patch, based on patch #2, that applies the style to the stable and stable9 themes.

akhildev.cs’s picture

akhildev.cs commented
StatusFileSize
new before patch.png18.67 KB
new after patch.png19.58 KB

Hi jeremyvii, it looks great.
Applied patch #9 solves this issue for 9.4.x-dev.
patch applied on:-
Drupal version : 9.4.x-dev
Theme : bartik

clayfreeman’s picture

clayfreeman
he/him
Primary language English
commented
Status: Needs review » Reviewed & tested by the community

RTBC++

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 9: 3215517-8.patch, failed testing. View results

jeremyvii’s picture

jeremyvii commented
Status: Needs work » Reviewed & tested by the community

Marking as RTBC since the tests pass after a rerun.

gauravvvv’s picture

gauravvvv commented

  • lauriii committed 73f695b on 10.0.x 
    Issue #3215517 by Gauravmahlawat, sagarchauhan, jeremyvii, bkosborne:...

  • lauriii committed c32587a on 9.4.x 
    Issue #3215517 by Gauravmahlawat, sagarchauhan, jeremyvii, bkosborne:...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

I think it's fine to make this change to Stable because it seems low risk as it only impacts overflow of the multi-select element in off-cavas.

Committed 73f695b and pushed to 10.0.x. Also cherry-picked to 9.4.x. Thanks!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.