Multiple select element is inappropriately targeted with CSS in settings tray

Created on 11 September 2019, about 5 years ago

Updated 30 January 2023, almost 2 years ago

Problem/Motivation

In #2826722: Add a 'fence' around settings tray with aggressive CSS reset. → , insufficient testing resulted in multiple select elements being styled in an unusable manner. There are two parts: 1) the option items overspill the <select> element and 2) the color and background color of the <option> elements need reset to their initial values. The first part was addressed in #3043467: Multi-select list items "escape" bounding box in Off-Canvas Forms when using WebKit and Mozilla based browsers → . (Note: this commit is first available in 8.8.1.)

This issue has been re-scoped to address the second issue.

How it currently appears:

How it should appear:

Original summary

In #2826722: Add a 'fence' around settings tray with aggressive CSS reset. → , insufficient testing resulted in multiple select elements being styled in an unusable manner:

Proposed resolution

Update 'core/themes/stable/css/core/dialog/off-canvas.form.css' and 'core/misc/dialog/off-canvas.form.css' as follows:

  #drupal-off-canvas select:not([multiple]) {
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
  }
+ #drupal-off-canvas select[multiple] option {
+   color: initial;
+   background: initial;
+ }
  #drupal-off-canvas option {
    display: block;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;

Remaining tasks

Submit updated patch
Community review
Commit

User interface changes

Multiple select elements rendered in the settings tray will be styled in a useable manner.

API changes

None.

Data model changes

None.

Release notes snippet

None.

🐛 Bug report

Status

Needs work

Version

10.1 ✨

Component

Settings tray →

Last updated 14 days ago

Maintained by
🇺🇸United States @tedbow

Created by

🇺🇸United States Chris Burge

Live updates comments and jobs are added and updated live.

Needs usability review
Used to alert the usability topic maintainer(s) that an issue significantly affects (or has the potential to affect) the usability of Drupal, and their signoff is needed. When adding this tag, make it easy to review the issue. Make sure the issue summary describes the problem and the proposed solution. Screenshots usually help a lot! To get sign-off on issues with the "Needs usability review" tag, post about them in the #ux channel on Drupal Slack, and/or attend a UX meeting to demo the patch and get direct feedback from designers/UX folks/product management on next steps. If an issue represents a significant new feature, UI change, or change to the general "user experience" of Drupal, use Needs product manager review instead. See the scope of responsibilities for product managers.

Incomplete comments

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Comment almost 2 years ago →
needs-review-queue-bot
The Needs Review Queue Bot → tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024