Problem/Motivation

After migrating to Drupal 10, we had to use the Claro administration theme. Unfortunately, we noticed that in our page section types the tabledrag is now positioned in the middle. Large elements are difficult to move. This problem only occurs with Chromium. This behavior does not occur with Firefox. The elements should be easy to move (no matter how high). It would be best if the table drag element is positioned at the beginning.

Steps to reproduce

- Set Claro as your backend theme
- Go to a page and edit or create multiple page section types
- You can now see the central positioning of the tabledrag element (see picture)

Proposed resolution

Change the position of tabledrag to the top from the middle.

.tabledrag-cell-content > * {
  vertical-align: top;
}
.tabledrag-cell-content .tabledrag-handle::after {
  vertical-align: top;
}

Remaining tasks

Review MR
Commit
Merge

User interface changes

Before

After

API changes

NA

Data model changes

NA

Release notes snippet

NA

CommentFileSizeAuthor
#15 VerticalAlign.png77.67 KBahsannazir
#14 D10-AfterMR.png71.5 KBkanchan bhogade
#14 D10-BeforeMR.png71.01 KBkanchan bhogade
#14 D11-AfterMR.png70.66 KBkanchan bhogade
#14 D11-BeforeMR.png70.79 KBkanchan bhogade
#7 3423431-6.patch878 bytesmaninders
#6 3423431-after.png143.91 KBmaninders
#6 3423431-before.png152.08 KBmaninders
Bildschirmfoto 2024-02-23 um 12.22.18.png145.43 KBsandro_pagliara

Issue fork drupal-3423431

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

sandro_pagliara created an issue. See original summary.

nod_’s picture

nod_
Primary language French
Location Lille
commented
Version: 10.2.x-dev » 11.x-dev

happens in 11.x

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

Tanuj. opened merge request !6788

Kiane12’s picture

Kiane12 commented

It sounds like you're experiencing an issue with the table drag element's positioning within the Claro administration theme on Drupal, specifically when using Chromium browsers. This can be particularly problematic for user experience, especially when dealing with large draggable elements.

One possible workaround to consider, until a permanent fix is implemented, could involve custom CSS or JavaScript adjustments to alter the drag handle's positioning or enhance its visibility and accessibility. For instance, you might use CSS to adjust the drag handle's position to the top of the draggable item, ensuring it's consistently accessible regardless of the item's size or the browser in use.

Additionally, exploring JavaScript solutions that dynamically adjust the drag handle's position based on the user's interaction or the viewport size could offer a more responsive and user-friendly approach. This could involve listening for drag events and altering the handle's position to ensure it remains within an easily reachable area of the viewport.

It's also worth checking if there are any open issues or patches submitted by the community addressing this problem. Contributing to such discussions or patches can not only help you find a temporary solution but also assist in speeding up the resolution of the issue for everyone involved.

Remember, when customizing or extending functionality, it's essential to thoroughly test your changes across different browsers and devices to ensure compatibility and maintain a consistent user experience.

maninders’s picture

maninders commented
StatusFileSize
new 3423431-before.png152.08 KB
new 3423431-after.png143.91 KB

Before
3423431-before
After
3423431-after

maninders’s picture

maninders commented
Version: 11.x-dev » 10.2.x-dev
Status: Active » Needs review
StatusFileSize
new 3423431-6.patch878 bytes
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs issue summary update

Should be MR and screenshots need to be added to issue summary as well as proposed solution. The missing sections of the issue summary template

xjm’s picture

xjm
she/her
Primary language English
commented
Version: 10.2.x-dev » 11.x-dev

@Maninders, it's not helpful to post a patch when an issue already has a merge request, and therefore that doesn't receive issue credit. The screenshots did help me understand the problem, though, so that is creditable.

Also, the merge request needs to be against 11.x.

xjm’s picture

xjm
she/her
Primary language English
commented

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

gauravvvv’s picture

gauravvvv commented
Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs issue summary update

Updated issue summary

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

kanchan bhogade’s picture

kanchan bhogade commented
Status: Needs review » Needs work
StatusFileSize
new D11-BeforeMR.png70.79 KB
new D11-AfterMR.png70.66 KB
new D10-BeforeMR.png71.01 KB
new D10-AfterMR.png71.5 KB

Hi
I've tested MR 6788 on Drupal 10 and 11
MR is applied cleanly...

Test Result:
The positioning of the table drag element is changed from middle to top but the alignment of the drag icon with element name visually does not look good.

Attaching SS for reference

Moving to "Needs work"

ahsannazir’s picture

ahsannazir commented
StatusFileSize
new VerticalAlign.png77.67 KB

Changing vertical-align to top also changes alignment for small section fields. Check screenshot below

mark_fullmer’s picture

mark_fullmer
he/him
Primary language English
Location Tucson
commented
Related issues: +#3332683: Refactor Claro's tabledrag stylesheet

This issue will almost certainly need to be revisited, given the changes to Claro's tabledrag implementation introduced in #3332683: Refactor Claro's tabledrag stylesheet

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.