Autocomplete search results in an off-canvas form (like a custom block in layout builder) are nearly impossible to read:

search results hard to read

Steps to reproduce:

  1. Install site on 8.6.x or 8.7.x with standard install profile
  2. Enable layout builder module
  3. Add several terms to the existing "Tags" vocabulary
  4. Add a custom block type with a term reference field to the tags vocab
  5. Enable layout builder for the existing "Basic Page" content type
  6. Edit layout, and add your custom block to the page
  7. Search for terms in the autocomplete field, and observe that the results list displays dark gray text on a slightly darker gray background

The reason it happens is a combination of these two rules:

off-canvas.base.css has this:

#drupal-off-canvas *, #drupal-off-canvas *:not(div) {
    background: #444;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "liberation sans", sans-serif;
    color: #ddd;
}

That sets the background of the autocomplete <li> to that dark color.

Then we have this in off-canvas.form.css:

#drupal-off-canvas .ui-autocomplete li a {
    color: #595959 !important;
    cursor: pointer;
    padding: 5px;
}

Which sets the links to that dark gray.

Comments

bkosborne created an issue. See original summary.

bkosborne’s picture

Issue summary: View changes
bkosborne’s picture

Issue summary: View changes
anybody’s picture

Can someone explain why this code is used at all?
#drupal-off-canvas *

The ID hard to override in CSS and this selector might badly influence the style of several elements. Of course it's a quick solution, but I'm not sure if it's a good one... and perhaps at least it would have been better to use a class and not an ID?

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

dave reid’s picture