Problem/Motivation

In Claro theme, in the webform results table, If a sortable column has a long title, then it overlaps with the sort icon.
Webform Results Table
This is caused because the text trucation logic is applied to the `th` element, but in case of sortable column the title is in a `th a` element

Steps to reproduce

- Create a Webform with long field names.
- Submit a couple of entries.
- Go to the Webform submission page.

Proposed resolution

- Add the same text truncation style on `th a` as there's on `th`

Issue fork drupal-3441015

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:

Issue fork webform-3441015

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:

Comments

dipakmdhrm created an issue. See original summary.

dipakmdhrm changed the visibility of the branch 3441015-title-of-a to hidden.

dipakmdhrm changed the visibility of the branch 3441015-title-of-a to hidden.

dipakmdhrm changed the visibility of the branch 3441015-title-of-a to hidden.

dipakmdhrm changed the visibility of the branch 3441015-title-of-a to active.

dipakmdhrm’s picture

Issue summary: View changes
StatusFileSize
new116.09 KB
new424 bytes

I had some trouble with issue forks so here's a patch and before and after shots:

Before After
Only local images are allowed.
dipakmdhrm’s picture

Status: Active » Needs review
dipakmdhrm’s picture

StatusFileSize
new425 bytes

Patch with proper whitespaces

dipakmdhrm changed the visibility of the branch 3441015-title-of-a to hidden.

dipakmdhrm’s picture

Version: 11.x-dev » 10.3.x-dev
needs-review-queue-bot’s picture

Status: Needs review » Needs work

The Needs Review Queue Bot tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request. Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

dipakmdhrm’s picture

Status: Needs work » Needs review
needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

sakthi_dev changed the visibility of the branch 3441015-title-of-a to active.

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

sourojeetpaul’s picture

Assigned: Unassigned » sourojeetpaul
sourojeetpaul’s picture

Assigned: sourojeetpaul » Unassigned
Status: Needs work » Needs review

Hello there, Fixed the linting errors of the pipeline and hence the merge errors gets over now. So moving the ticket to "Needs Review" state.
https://git.drupalcode.org/project/drupal/-/merge_requests/7499#note_297751

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

sakthi_dev changed the visibility of the branch 3441015-title-of-a to hidden.

sakthi_dev’s picture

Status: Needs work » Needs review

As the latest dev branch is 11.x, created a MR for that branch. Hope this will resolve the needs review bot issue.

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new90 bytes

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

sourojeetpaul’s picture

Title: Title of a sortable column overlaps with the sort icon in Claro. » Title of a sortable column overlaps with the sort icon in Webform Submission.
Project: Drupal core » Webform
Version: 10.3.x-dev » 6.2.2
Component: Claro theme » Code
Assigned: Unassigned » sourojeetpaul
Status: Needs work » Active
Issue tags: -Claro +webform submissions
StatusFileSize
new23.8 KB
new82.23 KB
new59.64 KB
new6.45 KB

Hi, After digging up quite a bit, I found that the issue of overlapping of the icon is not with Drupal Core Views or Claro theme, rather its purely an issue of the webform module. At first I only tried to reproduce the issue with webforms module as mentioned by @dipakmdhrm, and hadn't tested it by creating a view. Sorry for that!

The issue seems to be legit when we are looking at webform submission sortable title but doesn't persist in other cases i.e views sortable column or so, The sort toggle icon is appearing properly in Claro theme. But while looking for that I encountered that there is an issue with the sort icon on Olivero theme in case of normal views. For a two column table if we make both the columns sortable then the sort icon as well as the sorting feature becomes available to the later one only irrespective of the length of heading, it disappears from the first column.

I think the issue of Olivero theme can be addressed on another issue or I'm not sure yet if any issue already exist in the D.O issue queue, have to check that.

Pertaining to the sort icon overlapping issue, its still there on the latest version of the webform module. So I'm changing the issue metadata accordingly. If you derive any other findings feel free to change accordingly!

Also attaching screenshots for the reference of my findings.

sourojeetpaul’s picture

Title: Title of a sortable column overlaps with the sort icon in Webform Submission. » Title of a sortable column overlaps with the sort icon in Webform Results Table.
Issue summary: View changes
Issue tags: -webform submissions
sourojeetpaul’s picture

Assigned: sourojeetpaul » Unassigned
Status: Active » Needs review
StatusFileSize
new23.72 KB

Hi, I've finally resolved the sort icon overlap issue for long headings in webform results table and raised an MR for the same. Please have a look!
https://git.drupalcode.org/project/webform/-/merge_requests/459
This is how it looks now even with longer titles!
Webform Results Headings

dipakmdhrm’s picture

Title: Title of a sortable column overlaps with the sort icon in Webform Results Table. » Title of a sortable column overlaps with the sort icon in Webform Results Table in Claro theme.
Issue summary: View changes
Status: Needs review » Needs work

@sourojeetpaul Nice work finding out that this was a webform issue!

Also added a comment to MR.

From your comment and my original findings, I believe this issue is a webform issue, but at the moment limited to claro.
Olivero doesn't seem to be affected by this, but like you mentioned it has it's own issue with icons.

I'll update the issue to keep the scope limited to claro & webform. Feel free to update if you disagree or/and if you find more.

Again, nice work! My bad that I missed that this was a webform issue.

sourojeetpaul’s picture

Assigned: Unassigned » sourojeetpaul

Hello, @dipakmdhrm
The changes suggested by you are valid, and I've also observed that the webform results table behaves differently on different theme, Like this icon overlapping issue is appearing on the claro theme and there is another issue on the results table on viewing it with Olivero theme.
So I agree that the changes should be in that specific file, and resolving it right away!

sourojeetpaul’s picture

Assigned: sourojeetpaul » Unassigned
Status: Needs work » Needs review

Hi, @depakmdhrm Resolved the issues suggested by you in my latest commit. Please have a look!
https://git.drupalcode.org/project/webform/-/merge_requests/459

dipakmdhrm’s picture

Issue summary: View changes
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new121.44 KB
new121.89 KB

Latest MR fixes this. RTBC

Before After
jrockowitz’s picture

Project: Webform » Drupal core
Version: 6.2.2 » 11.x-dev
Component: Code » ajax system

The patch is against Drupal core. This ticket should be moved to Drupal core's issue queue.

sourojeetpaul changed the visibility of the branch 3441015-sortable-columns-11.x to hidden.

sourojeetpaul changed the visibility of the branch 3441015-sortable-column-titles to hidden.

sourojeetpaul’s picture

Project: Drupal core » Webform
Version: 11.x-dev » 6.2.2
Component: ajax system » Code

Hi @jrockowitz,
I think you might got confused by the first two MRs. Those were raised against Drupal Core, but later as per my findings I changed the fork repo to that of webforms and created a MR for the same against the branch 6.2.x which I suppose is for the latest version of the module.
And @dipakmdhrm also confirmed my findings and tested the same.
If it was a Drupal Core issue it should affect all other table headers like that of Core's View, but that is not the case here. Rather its a Webform issue and how its interacting the Core's themes. As mentioned on my previous comment, its behaving differently with differnt themes of Core, as of this I limited the scope to its interaction with Claro theme, maybe we can target its interaction with other themes in another issue.

I think the confusion was created as those previous two MRs were still open. Sorry for that! I couldn't close them as I'm not the one who opened those MRs respectively.

Please refer to MR !459 https://git.drupalcode.org/project/webform/-/merge_requests/459 for this issue. It targets the issue related to Webform module and how it interacts with Core's claro theme.

Also I'm hiding the previous MRs to avoid further confusion and changing the issue metadata once again!

jrockowitz’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

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

jrockowitz’s picture