Problem/Motivation

Tabledrag is broken in the sidebar when using the 'Move' option in Layout builder. The arrows icon is not visible so there is no way to drag and drop items.

This only occurs in 9.5.x-dev, it is working in 9.4.8 and in 10.1.x-dev, but I tested on a fresh install a few times just to make sure. The issue is there with Olivero and Bartik so doesn't seem to be a theme-specific issue.

Screenshots of broken state (from 9.5.x-dev):

Screenshots of working state (from 9.4.8)

Steps to reproduce

  1. Install Drupal 9.5.x-dev
  2. Enable Layout builder and Layout builder modules
  3. Enable Layout builder on the article content type
  4. Go to Manage display
  5. Select a block and click 'Move'
  6. See that the drag-and-drop icon is not visible and you are unable to move the items

Proposed resolution

Remaining tasks

CommentFileSizeAuthor
#20 Drupal 10.2.3-without-patch.png80.56 KBmingsong
#18 Screenshot 2023-10-25 at 4.14.42 PM.png169.39 KBshani maurya
#18 Screenshot 2023-10-25 at 4.14.52 PM.png233.39 KBshani maurya
#18 Screenshot 2023-10-25 at 4.13.58 PM.png214.33 KBshani maurya
#17 Screenshot 2023-10-25 at 3.54.26 PM.png434.8 KBshani maurya
#16 interdiff-14_16.txt5.35 KBgauravvvv
#16 3316720-16.patch6.27 KBgauravvvv
#14 3316720-14-after.png67.32 KBshyam_bhatt
#14 3316720-14.patch6.47 KBshyam_bhatt
#12 3316720-tabledrag-broken-layout-builder-12.patch2.29 KBrmixter
#11 Screen Shot 2023-01-24 at 12.00.40 pm.png9.41 KBpameeela
#9 Screen Shot 2023-01-24 at 10.32.31 am.png26.41 KBpameeela
#8 3316720-tabledrag-broken-layout-builder-8.patch1.5 KBzipymonkey
#7 Screen Shot 2023-01-23 at 9.00.17 pm.png21.91 KBpameeela
#6 3316720-tabledrag-broken-layout-builder-6.patch908 byteszipymonkey
#5 claro.png104.25 KBbnjmnm
#5 olivero.png114.87 KBbnjmnm
#5 stark.png74.33 KBbnjmnm
Screen Shot 2022-10-21 at 12.09.20 pm.png12.03 KBpameeela
Screen Shot 2022-10-21 at 12.08.55 pm.png13.41 KBpameeela
Screen Shot 2022-10-21 at 11.56.29 am.png22.2 KBpameeela
Screen Shot 2022-10-21 at 11.56.10 am.png21.67 KBpameeela

Issue fork drupal-3316720

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

pameeela created an issue. See original summary.

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

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

It appears this is due to two changes introduced in #3227431: Tabledrag icon doesn't adapt to forced-colors mode.

The mask added in tabledrag.module.css

Removing the nbsp in the tabledrag handle in misc/tabledrag.es6.js

Although I'm pointing those out as the cause of the issue reported here, simply undoing those changes is probably not the right approach if it reverts the accessibility fix from that issue.

This likely isn't a problem in 10.x due to the off canvas CSS improvements that were introduced there due to 10 no longer having to support IE11.

bradallenfisher’s picture

bradallenfisher commented

so should this be fixed/addressed there or here?

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented
StatusFileSize
new stark.png74.33 KB
new olivero.png114.87 KB
new claro.png104.25 KB

This is in fact fixed in Drupal 10
Claro

Olivero

Stark

Re #4

so should this be fixed/addressed there or here?

I'm not sure what the "there" is in that question. If it's asking if it should be addressed in the issue #3227431: Tabledrag icon doesn't adapt to forced-colors mode, that is definitely no as that issue is closed. The activity would happen here.

Because this works fine in Drupal 10, this would be something only implemented in 9.5. Whatever the solution is, keep in mind that it needs to continue working in forced-colors mode.

zipymonkey’s picture

zipymonkey commented
StatusFileSize
new 3316720-tabledrag-broken-layout-builder-6.patch908 bytes

It looks like this is related to height and width of the handle icon being set to auto for off-canvas draggable tables. If we remove this style then the move icon is visible again. I have attached a patch that fixes this for 9.5.x.

pameeela’s picture

pameeela commented
StatusFileSize
new Screen Shot 2023-01-23 at 9.00.17 pm.png21.91 KB

Tested the patch but I'm seeing this (in Chrome on Mac):

zipymonkey’s picture

zipymonkey commented
StatusFileSize
new 3316720-tabledrag-broken-layout-builder-8.patch1.5 KB

Looks like there is a mask in the tabledrag styles that is on top of the background image. Removing the mask appears to make this work.

pameeela’s picture

pameeela commented
StatusFileSize
new Screen Shot 2023-01-24 at 10.32.31 am.png26.41 KB

This is better, though not quite aligned. I'm also not able to test high contrast since that's on Windows. Not sure whether this is committable in this state, since it is totally broken right now?

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

High contrast support can now be tested on any Chrome browser. Test with forced colors mode on both light and dark scenes and that’ll do it https://devtoolstips.org/tips/en/emulate-forced-colors/

pameeela’s picture

pameeela commented
StatusFileSize
new Screen Shot 2023-01-24 at 12.00.40 pm.png9.41 KB

Oh thanks, the other issue said it needed Windows.

Honestly not sure whether this is a pass or fail? But again at the moment it's not there at all, in any mode, so should this go in as a fix? It's already fixed properly in 10.x so this is just a band-aid.

rmixter’s picture

rmixter commented
StatusFileSize
new 3316720-tabledrag-broken-layout-builder-12.patch2.29 KB

I've attached a patch to fix this in Stable9 as well.

akoe’s picture

akoe commented

Tested patch with v 9.5.9 and it solve the issue with a Claro based theme

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
Status: Active » Needs review
StatusFileSize
new 3316720-14.patch6.47 KB
new 3316720-14-after.png67.32 KB

@akoe @rmixter I have checked the #12 patch, but the alignment does not look good for the layout builder fields.
Please check the following steps to test it:

  1. Install Drupal 9.5.x
  2. Enable Layout builder and Layout builder modules
  3. Enable Layout builder on the article content type
  4. Go to Manage display
  5. Select a block and click 'Move'
  6. See that the drag-and-drop icon alignment is not look good

Please check the provided patch, I have fixed the layout alignment issue.

After patch:
2023-09-25/3316720-14-after.png

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs tests

@Shyam_Bhatt believe include interdiffs when uploading patches

Think this will also need a test case.

Doesn't appear to be an issue in D10.1.x

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3316720-16.patch6.27 KB
new interdiff-14_16.txt5.35 KB

I have fixed the order/properties-order in multiple files in patch #14, attached the interdiff for same. Test case still needs to be added

shani maurya’s picture

shani maurya
Location Mumbai
commented
StatusFileSize
new Screenshot 2023-10-25 at 3.54.26 PM.png434.8 KB

After applying the patch #16, drag-drop icon is coming. but the alignment of the button has been dislocated. This needs to be fixed.

shani maurya’s picture

shani maurya
Location Mumbai
commented
StatusFileSize
new Screenshot 2023-10-25 at 4.13.58 PM.png214.33 KB
new Screenshot 2023-10-25 at 4.14.52 PM.png233.39 KB
new Screenshot 2023-10-25 at 4.14.42 PM.png169.39 KB

Patch #6 is working fine and there is not a y alignment issue coming.

Thank You!

Version: 9.5.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mingsong’s picture

mingsong
Location 🇦🇺
commented
StatusFileSize
new Drupal 10.2.3-without-patch.png80.56 KB

Does this issue still exist?

I did a quick test by following the steps in the issue description and I can't reproduce this issue any more.

Test environment:

Drupal core: 10.2.3
PHP version: 8.3.2
Chrome 122.0.6261.94
and
Firefox 123.0

Working without patching.

pameeela’s picture

pameeela commented
Status: Needs work » Closed (outdated)

It was only ever an issue in 9.5.x so this can be closed.

pameeela’s picture

pameeela commented
Version: 11.x-dev » 9.5.x-dev