The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.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)
Steps to reproduce
- Claro should be the admin theme
- Add a media library field to any content type.
- There should be existing media available so the issue can be seen.
- The Contextual module needs to be disabled
- Open the media library dialog in the add/edit form for the content type
- 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
| Comment | File | Size | Author |
|---|---|---|---|
| #18 | After_Patch.png | 337.92 KB | sdhruvi5142 |
| #18 | Before_Patch.png | 350.52 KB | sdhruvi5142 |
| #17 | Screenshot 2025-03-27 at 20.04.01.png | 507.6 KB | julio_retkwa |
| #11 | Screenshot 2025-03-19 at 00.18.16.png | 347.98 KB | julio_retkwa |
| #3 | Screenshot-of-latest-media-library-view-in-drupal-11.png | 49.83 KB | niranjan_panem |
Issue fork drupal-3502895
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- 3502895-media-library-item
changes, plain diff MR !11488
Comments
Comment #2
quietone commentedComment #3
niranjan_panem commentedIn Drupal 11 the labels in media library moved to center below the file, below is the screen shot of it.
Comment #4
bnjmnmRe #3 @niranjan_panem in order to reproduce the issue as reported, the contextual module must be disabled.
Since you did not mention disabling the contextual module in your comment, anyone looking at this issue should assume the issue as reported is still valid unless #3 is clarified further.
Comment #5
phenaproximaThis is of interest to Experience Builder and, therefore, to Drupal CMS. I'm hoping it can be fixed in time for Drupal CMS 2.0, which will have XB as its native page builder.
Comment #8
julio_retkwaI've added an approach that solves the issue, but my concern is on how to test it widely to make sure it works on all instance
If anyone could help me with that would be great :)
Comment #9
julio_retkwaComment #10
bnjmnmTesting it widely could be difficult, but there's a way to approach this where this wouldn't be necessary.
Instead of changing padding and max-width, the least disruptive way to do this would be to preserve the styling that is known to already work. If you make the enclosing
<article>tag haveposition: relative;, but use a selector that isn't dependent on the.contextual-regionclass being present, this fixes it in a way that only requires a few moments of testing.Comment #11
julio_retkwaHi @bnjmnm thanks for the insights I've updated my MR based on your suggestion
off topic here:
My previous commits were made based on the following issue:
There is any issue related to that already opened? it basically happens on any media library item that has a text that goes less than 80% of wrapper size
Comment #12
smustgrave commentedHello, can the IS be updated please.
Proposed solution
Steps to reproduce
Before/after screenshots in the User Interface section
API and Data model are unchanged so probably can just put NA.
Thanks!
Comment #13
julio_retkwaComment #14
julio_retkwaHi @smustgrave I've just updated, but I'm not sure if following are right:
* Release notes snippet
* Introduced terminology
* Remaining tasks
May you can assit me with that?
Thank you!
Comment #15
julio_retkwaComment #16
bnjmnm@julio_retkwa appreciate the attempt but the changes to the summary are not at all what was reported, the steps to reproduce and proposed solution seem like they are from an entirely different issue that happens to be media library related. Among other things you added "Added a js behaviour to scroll up on field media modal open." as the Proposed Solution despite not touching any JS in your MR or the issue having anything to do with scrolling.
I updated the IS to address this.
Comment #17
julio_retkwa#16 Hi @bnjmnm Thanks for jumping into that, I've changed summary wrongly.
Here is the result of my MR:
Comment #18
sdhruvi5142 commentedHi
I've applied MR!11488 on Drupal Version 11.x and the changes are working as expected.
Testing Steps:
1. Installed Claro as the admin theme
2. Added a media library field to any content type.
3. Disabled the Contextual module
5. Open the media library dialog in the add/edit form for the content type
6. Observe the changes there
Testing result:
After applying the MR! the Media libarray item styles looks proper nothing seems to be broken. Attaching SS for reference. Moving this to RTBC+1
Status : PASS
Comment #21
nod_Committed and pushed 119097957c2 to 11.x and 299c60c7f65 to 10.5.x and 18f2872e543 to 11.1.x and 3b341184245 to 10.4.x. Thanks!