Incorrect positioning of the table drag element

Created on 23 February 2024, 9 months ago
Updated 14 June 2024, 5 months ago

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

๐Ÿ› Bug report
Status

Needs work

Version

11.0 ๐Ÿ”ฅ

Component
Claroย  โ†’

Last updated 2 days ago

Created by

๐Ÿ‡ฉ๐Ÿ‡ชGermany sandro_pagliara

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @sandro_pagliara
  • ๐Ÿ‡ซ๐Ÿ‡ทFrance nod_ Lille

    happens in 11.x

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia TanujJain-TJ

    Tanuj. โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Success
    9 months ago
    Total: 482s
    #104922
  • 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.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Maninders

    Before

    After

  • Status changed to Needs review 8 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Maninders
  • Status changed to Needs work 8 months ago
  • ๐Ÿ‡บ๐Ÿ‡ธUnited States smustgrave

    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

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States xjm

    @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.

    Also, the merge request needs to be against 11.x. Sometimes it's easiest to just open a new MR and close the old one. However, note that any of the above are not enough to receive credit without other contributions to the issue. Thanks!

  • ๐Ÿ‡บ๐Ÿ‡ธUnited States xjm
  • First commit to issue fork.
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia gauravvvv Delhi, India

    Updated issue summary

  • Pipeline finished with Failed
    5 months ago
    Total: 969s
    #195182
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ehsann_95

    ahsannazir โ†’ made their first commit to this issueโ€™s fork.

  • Pipeline finished with Success
    5 months ago
    Total: 679s
    #196858
  • Status changed to Needs work 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Kanchan Bhogade

    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"

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia ehsann_95

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

Production build 0.71.5 2024