Contrib.social

Overqualified CSS to fix Slick Views on Olivero theme breaks any theme and any view

Open on Drupal.org →
Created on 29 October 2024, about 2 months ago

Problem/Motivation

There was a fix added to the Slick module's CSS to fix problems with Olivero theme. The CSS was, at one point, properly scoped to affect only views that are using Slick. However, that CSS was recently changed as part of 📌 Incompatibility with Drupal 11/jQuery 4 Fixed on commit 299772e4 and is now is having unintended consequences on my theme.

Most importantly:

  • The view whose display broke does not use Slick at all.
  • The theme we're using is not at all related to Olivero.

Why was this change made?

- /* Fix for unnecessary Olivero Grid surprises causing Slick excessive height. */
- div[class*="view-slick"],
- div[class*="view-slick"] .view-content,
- div[class*="view-blazy"],
- div[class*="view-blazy"] .view-content {
+ /* Fix for unnecessary Olivero Grid surprises causing Slick excessive width. */
+ .view,
+ .view .view-content,
+ .block .view,
+ .block .view .view-content {
  display: block;
}

Steps to reproduce

Given the following CSS in a custom theme, unrelated to Olivero:

  .view-events-today .view-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
  }

The overqualified CSS provided by this module via 299772e4 is overriding display: flex with a .block .view .view-content { display: block; }.

The workaround is to over-overqualify my own CSS — which is less than ideal — with:

.block .view-events-today .view-content {
  display: flex;
}

.

Proposed resolution

There must be a better way to scope this to fix a display bug specific to Slick views on the Olivero theme.

The proper approach would satisfy the following criteria:

  1. it fixes Slick views only, but doesn't affect non-Slick views,
  2. it fixes a display issue on Olivero theme, or Olivero-based subthemes, but doesn't affect Non-olivero themes.
  3. there is no regression in other functionality introduced in 📌 Incompatibility with Drupal 11/jQuery 4 Fixed

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

3.0

Component

Code

Created by

🇪🇨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jwilson3
  • Comment about 2 months ago →
    🇪🇨Ecuador jwilson3
  • Comment about 2 months ago →
    🇮🇩Indonesia gausarts

    You are correct.

    Try typing your would-be title keywords in the search box for details.

    Updating should also fix it.

  • Comment about 2 months ago →
    🇪🇨Ecuador jwilson3

    Thanks. I found the existing issue here 🐛 slick.theme.css overrides Blazy CSS Active . If I'm reading the project's git commit graph correctly, then upgrading to 3.0.4 → should fix the issue.

    The resolution I proposed above seems to be better than the one taken on the original issue, so I'll leave it up to the maintainer to make a decision whether you want to re-introduce the CSS in a way that it only affects Olivero theme.

  • Comment about 2 months ago →
    🇮🇩Indonesia gausarts

    The current solution with view--blazy CSS class scoped to Slick/Splide and Blazy ecosystem as Views output addressed various use cases which might break them at one go.

    The linked issue was quick and dirty solution which should have been removed once a more scoped solution was available, which is now in the latest Blazy.

    There is a similar issue at Splide which has different CSS implementation from Slick's, meaning the CSS rule breaks any carousels/sliders, either with float or flex rules.

    Your proposed solution doesn't address other themes, or Olivero sub-themes, and potentially adds more complex logic for a tiny mistake like this outside (sub-) Olivero.

    The solution was already in Blazy, nothing else to do now.

    Updating to the latest Blazy should fix the issue.

    Should be marked as Dup, but Postponed to avoid more dups, not to do something else better :)

    Thank you, anyway.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024