Problem/Motivation

Because of the change for #3223061: Long custom block name forces 'Place block' button out of place released in 9.5.0 (and higher), I'm seeing off-looking button placement like this:

Edit button off-kilter

or this:

Confirm Removal button off-kilter

after test-driving the core update. This is due to .js td .dropbutton-multiple .dropbutton-widget { position: absolute; } now being newly more specific in core/misc/dropbutton/dropbutton.css (used to be .js td .dropbutton-widget) than .js .field--widget-entity-reference-paragraphs .dropbutton-widget { position: relative; } in paragraphs.admin.css.

Steps to reproduce

  1. Use Seven theme (doesn't seem to be an issue for Claro)
  2. Edit a node with a paragraph field in it that uses the Legacy widget
  3. Make sure "Hide row weights" isn't on (i.e. drag-and-drop is enabled, i.e. the "Show row weights" link is visible), as this also doesn't seem to be an issue then.
  4. Then either:
    1. if you're editing an existing paragraph, and the widget's "Edit mode" is set to "Closed" or "Preview", I think you'll already see something like the first screenshot
    2. Otherwise, start to "Remove" the paragraph and you should see something like the second paragraph

Proposed resolution

I assume an easy/quick/good-enough fix would be to make the particular paragraphs selector using position: relative more specific. Though I haven't read the full thread at #3223061: Long custom block name forces 'Place block' button out of place to know if perhaps a different solution for that issue might be a better/possible approach (and perhaps less prone to a specificity war?).

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#20 3331203-20.patch444 bytesjheinon_finland
#11 3331203-11.patch368 byteslmoeni
#3 core-absolute-position-affecting-paragraphs-3331203-3.patch364 bytesmaxstarkenburg
#2 3331203-2.patch522 bytescolorfield
Screen Shot 2023-01-05 at 1.33.41 AM.png71.71 KBmaxstarkenburg
Screen Shot 2023-01-05 at 1.35.20 AM.png69.42 KBmaxstarkenburg

Issue fork paragraphs-3331203

Command icon 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:

About issue forks

Comments

maxstarkenburg created an issue. See original summary.

colorfield’s picture

colorfield
Primary language French
Location Lausanne
commented
StatusFileSize
new 3331203-2.patch522 bytes

Not sure if this should be the responsibility of this module, but here is a first hotfix.

maxstarkenburg’s picture

maxstarkenburg
he/him
commented
StatusFileSize
new core-absolute-position-affecting-paragraphs-3331203-3.patch364 bytes

Thanks, @colorfield, I too had spun up a local patch for this (so as to not further prevent my core upgrade), which I 100% admit is rather silly with that semi-random div in it, but is perhaps a bit simpler selectors-wise (was originally going to throw in .dropbutton-multiple à la the core change, but then realized the paragraphs position:relative might be needed for other non-multiple widgets, so just went with something simple if a bit silly/non-specific).

3li’s picture

3li
he/him
Primary language English
Location U.K. 🇬🇧
commented
Status: Active » Reviewed & tested by the community

Applying the css patches moved button placements back to where was expected.

leksat’s picture

leksat commented

RTBC++

robbdavis’s picture

robbdavis commented

This is also broken with adminimal theme. Patch #3 fixes the issue.

eugen zerr’s picture

eugen zerr
Primary language German
commented

Can also confirm the error using

* Drupal » 9.5.1
* PHP » 8.1
* Admin. theme » Adminimal

dydave’s picture

dydave commented

Hi everyone,

Thanks a lot for raising this issue and for contributing a patch.

We would like to gladly confirm the patch from #3 fixed the issue in our case and was successfully tested on D9 with:

  • Drupal core: 9.5.2
  • Paragraphs: 1.15.0
  • PHP: 8.1
  • Adminimal theme: 1.6.0

 
Additionally, this was also tested successfully on D10 with:

  • Drupal core: 10.0.2
  • Paragraphs: 1.15.0
  • PHP: 8.1
  • Adminimal theme: 1.6.0 + D10 patch
  • Contrib theme Seven: 1.0.0-alpha1

 
Any additional feedback, comments or reviews would be greatly appreciated.
Thanks again very much for your contributions.

drupalfan2’s picture

drupalfan2 commented

Same problem here. Patch #3 helps.

msbtterswrth’s picture

msbtterswrth commented

RTBC++
Confirmed works for us.

* Drupal » 9.5.1
* PHP » 8.1
* Admin. theme » Seven

lmoeni’s picture

lmoeni
she/her
commented
StatusFileSize
new 3331203-11.patch368 bytes

The patch did not work for me, I had to add a div to make it a little bit more specific.
I added a patch in case someone has the same issue.

  • Drupal 9.5.3
  • PHP 8.1
  • Seven theme
  • Paragraphs 1.15

urvashi_vora made their first commit to this issue’s fork.

urvashi_vora opened merge request !51

joaopauloscho’s picture

joaopauloscho commented

The patch #11 works for us on 9.5.5 - Thanks!

nicklasmf’s picture

nicklasmf commented

Patch #11 works here as well on Core 9.5.5

thomaswalther’s picture

thomaswalther commented

Patch #11 works also with core 9.5.8

  • Berdir committed 9dde686c on 8.x-1.x authored by lmoeni 
    Issue #3331203 by maxstarkenburg, lmoeni, colorfield: Core 9.5.0 causing...
berdir’s picture

berdir
Primary language German
Location Switzerland
commented
Status: Reviewed & tested by the community » Fixed

Committed. I do recommend you consider switching to the recommended widget. We will eventually remove the legacy version if it becomes too much of a burden to maintain.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

jheinon_finland’s picture

jheinon_finland commented
StatusFileSize
new 3331203-20.patch444 bytes

Greetings!

This problem is still apparent in the latest version for the Paragraphs module, 1.16. Here is the updated version of the patch.