Quantcast
Viewing all articles
Browse latest Browse all 294883

Media Library item styles assume contextual module is present

Problem/Motivation

For media item labels to be positioned correctly, the enclosing <article> needs to be position: relative;. If the page includes the contextual module libraries then the <article> will have the .contextual-region class and be styled by this bit in contextual.module.css

.contextual-region {
    position: relative;
}

There are legit scenarios such as this one with Experience Builder where the media library is used without contextual present -- even on sites with that module enabled.

It winds up looking like this, with the labels under the images out of place (not hugely so, but still not a great look)
Image may be NSFW.
Clik here to view.

Steps to reproduce

  1. Claro should be the admin theme
  2. Add a media library field to any content type.
  3. There should be existing media available so the issue can be seen.
  4. The Contextual module needs to be disabled
  5. Open the media library dialog in the add/edit form for the content type
  6. Note the labels being misaligned for each media item listed, as seen in the screenshot in the prior section.

Proposed resolution

The element that currently gets the position: relative; style from the Contextual module should instead get it from CSS provided by media library so it is always applied, not just when Contextual is enabled

Remaining tasks

Review & Test

User interface changes

Some labels that are out of alignment when Contextual is not enabled (see screenshot in Problem/Motivation) will now look the same as if Contextual was enabled.

When there's an after screenshot for this it should include the markup to show it is aligned without the .contextual-region class present.

Introduced terminology

NA

API changes

NA

Data model changes

NA

Release notes snippet

NA


Viewing all articles
Browse latest Browse all 294883

Trending Articles