Problem/Motivation

Tags are overlapping with process icon in autocomplete field.

Before:

After:

Steps to reproduce

  1. Install any theme of core
  2. Create any article
  3. Add tags in tags fields
  4. You will see the tags are overlapped with icon

Proposed resolution

Need to add right padding from between text and icon

Kindly give feedback if it's a global issue

CommentFileSizeAuthor
#33 Tags-overlap-Claro-fixed.png55.6 KBsheetal.pathak
#30 after-patch.png100.01 KBshweta__sharma
#22 before-patch-15.png193.3 KBdjsagar
#22 after-patch-15.png295.48 KBdjsagar
#16 After.png47.29 KBameymudras
#16 Before.png47.41 KBameymudras
#15 3244302-15.patch2.06 KBgauravvvv
#14 Screenshot 2023-01-13 at 3.53.43 PM.png90.23 KBgauravvvv
#6 3244302-6.patch579 bytesranjith_kumar_k_u
#5 tag-overlap-process-icon-3244302-4.patch703 bytesakashdab
#4 tag-overlap-process-icon-3244302-3.patch625 bytesakashdab
Screenshot_9.png62.24 KBshweta__sharma

Issue fork drupal-3244302

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

shweta__sharma created an issue. See original summary.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

akashdab’s picture

akashdab commented
Assigned: Unassigned » akashdab
Status: Active » Needs work
akashdab’s picture

akashdab commented
Title: Tags are overlapping with process icon in autocomplete field » Fix for tags overlapping with process icon in autocomplete field
Category: Bug report » Task
Status: Needs work » Needs review
StatusFileSize
new tag-overlap-process-icon-3244302-3.patch625 bytes

Kindly review the patch

akashdab’s picture

akashdab commented
StatusFileSize
new tag-overlap-process-icon-3244302-4.patch703 bytes

Kindly review the fupdated patch (fixed the padding order error)

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new 3244302-6.patch579 bytes
akashdab’s picture

akashdab commented
Assigned: akashdab » Unassigned

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

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

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

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

gaurav-mathur’s picture

gaurav-mathur commented
Assigned: Unassigned » gaurav-mathur
gaurav-mathur’s picture

gaurav-mathur commented
Assigned: gaurav-mathur » Unassigned

Patches are not working on newer version of drupal (10.1.x) create new according to latest version
There is no stable theme in newer version and in olivero theme drupal latest version there is no overlapping of text over icon

gaurav-mathur’s picture

gaurav-mathur commented
Status: Needs review » Closed (outdated)
gaurav-mathur’s picture

gaurav-mathur commented
Status: Closed (outdated) » Needs review
gauravvvv’s picture

gauravvvv commented
StatusFileSize
new Screenshot 2023-01-13 at 3.53.43 PM.png90.23 KB

I can confirm this is still happening in Claro & Stable9. Not able to reproduce in Olivero theme.

Claro Theme:

gauravvvv’s picture

gauravvvv commented
StatusFileSize
new 3244302-15.patch2.06 KB

I have attached the patch for Claro & Stable theme. Please review.

ameymudras’s picture

ameymudras commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before.png47.41 KB
new After.png47.29 KB

Patch #15 seems to be helpful, I tested the same and following are the results

1. The issue summary describes the problem along with steps to reproduce
2. The issue is replicable on 10.1.x
3. The patch applies cleanly and fixes the issue
4. Did a code review and it seems to be a good solution to add a padding

Marking this as RTBC, providing screenshots for the same

ameymudras’s picture

ameymudras commented
Issue summary: View changes
xjm’s picture

xjm
she/her
Primary language English
commented
Status: Reviewed & tested by the community » Needs review

This is categorized as CSS, but changing only Claro. Does the bug exist in other themes? #14 says Stable 9 is affected too, which we wouldn't break in a minor release, but might require a followup for the next major if we don't fix #3050386: Allow loading CSS and JavaScript directly from templates in time for said next major.

xjm’s picture

xjm
she/her
Primary language English
commented
Issue tags: +Needs followup

Tagging for the followup issue if this is indeed confirmed to affect Stable 9.

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

For the follow up. Also this may be a duplicate of #3199601: Autocomplete loading text overlaps long labels if someone can confirm we can consolidate and move over credit

Version: 10.1.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, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

djsagar’s picture

djsagar commented
Status: Needs work » Needs review
StatusFileSize
new after-patch-15.png295.48 KB
new before-patch-15.png193.3 KB

HI smustgrave,

I confirm that both issues are the same, I test this in drupal 11 with Claro theme. This appears to be a duplicate of https://www.drupal.org/project/drupal/issues/3199601. We can consolidate and move over credit accordingly.

I also applied patch #15 which resolved this issue.
Fore reference:
Before
before patch

After
after patch

Kindly review.

needs-review-queue-bot’s picture

needs-review-queue-bot commented
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.)

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

Gauravvvv opened merge request !6033

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Still an open question in #20

gauravvvv’s picture

gauravvvv commented

For the follow up. Also this may be a duplicate of #3199601: Autocomplete loading text overlaps long labels if someone can confirm we can consolidate and move over credit

These issues are not exactly same, #3199601: Autocomplete loading text overlaps long labels, is particularly for the label above the autocomplete field is overlapping the "Loading" text and this issue is for the text inside autocomplete field is overlapping the search icon.

#3199601 - Issue screenshot:

shweta__sharma’s picture

shweta__sharma commented
Status: Needs work » Needs review
shweta__sharma’s picture

shweta__sharma commented
StatusFileSize
new after-patch.png100.01 KB

Tested merge request !6033 and looks good overlapping issue with the icon has been fixed.

After Fix SS -

after-patch

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work

Tagged for follow up but don't see that yet.

akashdab’s picture

akashdab commented

The issue of tags overlapping with process icon does not seem to occur anymore. Link

Regarding the issue being a duplicate of #3199601 in comment #20; Issue #3199601 has 2 problems, of which the second one seems to be same as the one discussed here.

sheetal.pathak’s picture

sheetal.pathak commented
StatusFileSize
new Tags-overlap-Claro-fixed.png55.6 KB

Tags overlapping with process icon is seems to be fixed.
Drupal version 11.x-dev
Theme. Claro
Steps

1. Install Drupal 11
2. Set Claro as default theme.
3. Add Article content type.
4. Add tags in it.

This ticket can be moved ahead.

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.