Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
Problem/Motivation
This has been reported many times, but always as an "oh by the way", never explicitly.
This is the problem:
Proposed resolution
Remaining tasks
User interface changes
See above.
API changes
None.
Data model changes
A bit more CSS.
Release notes snippet
Comment | File | Size | Author |
---|---|---|---|
#13 | with patch.png | 214.6 KB | oknate |
#13 | without patch.png | 244.64 KB | oknate |
#5 | margin with none align.png | 81.56 KB | oknate |
#3 | 3059480-3.patch | 1.63 KB | Wim Leers |
| |||
#2 | 3059480-2.patch | 1.64 KB | Wim Leers |
Comments
Comment #2
Wim LeersThis patch makes us go from the problematic first screenshot to the much better second screenshot.
Comment #3
Wim LeersRerolled.
Comment #4
Wim LeersI am torn between
Then again, I don't think it's likely many sites are overriding
float
andmargin
for entity fields and their contents. So maybe I should generalize? But then what about people embedding webforms and the likes, they could be negatively impacted.Setting this to RTBC, and if nobody complains today, I'm just going to go ahead and commit it. We can easily refine this CSS later.
Comment #5
oknateOn a clean standard install and using a media embed with thumbnail formatter, there's no white space above the caption, but there's a lot of whitespace between the embed and the outline.
It looks unrelated though. I'll report this bug on the issue: #3037316: Show an outline around the <drupal-entity> element within CKEditor
Comment #6
oknateI'm trying to manually test, and I'm not seeing the gap without the change. Can you add testing instructions?
Comment #7
oknateComment #8
Wim Leers#5: this issue is specifically about the front end.
Also, you're testing with the thumbnail formatter Entity Embed Display, this issue is specifically about using the view mode Entity Embed Display.
So: make sure to test with
data-entity-embed-display="view_mode:media.full"
.Comment #9
oknateTesting with full view mode, I also don't see the issue. What theme are you using?
Another issue I'm seeing is the way you're adding the library, I'm not seeing it affect the CKEditor. It looks like it's adding it to the main page. If I add it here, then I see the css rules affecting the elements:
I think this needs steps to reproduce, and I'm not convinced the library is added in a way that works, based on manual testing. Although, I recognize it must work for you. I was testing with Drupal 8.7.1.
I think when you add libraries in the ajax response, it adds them to the main page, not to the CKEditor which has its own encapsulated css world.
Comment #10
Wim LeersJust Drupal core's default theme: Bartik.
That's why I said "this is about the front end" :)
Not that every screenshot I posted is taken at
/node/5
, not at/node/5/edit
.I think this is why you're not able to reproduce this: you're just looking in the wrong place :D
Comment #11
oknateoh, no wonder, that's why your "wyswiyg" looks so different, it's not one. I'll retest.
Comment #12
Wim Leers@oknate: Alright, looking forward to your response :)
Comment #13
oknateMarking RTBC. The gap is gone on a standard install.
Without patch:
With patch:
Comment #16
Wim LeersDiscussed with @phenaproxima.
I wanted to get his perspective on this particular CSS.
He initially was wondering if we should make it more specific. He agrees we should be only targeting media, because for example nodes might be showing more data that actually requires floats in order to get a sensible representation. Whereas for media, the common expectation (dare I say 100%?) is to have a single piece of media displayed, and so any floats and margins simply get in the way.
Comment #17
Wim LeersComment #18
rosinegrean CreditAttribution: rosinegrean at PitechPlus commentedComment #19
Wim LeersFYI: