Problem/Motivation

Action select list item overlaps the icon in 'RTL'. Check screenshot

Steps to reproduce

1. Go to admin/content page in RTL direction.
2. Select Remove content from front page
3. You will see the text overlaps the icon.

Proposed resolution

Fix the RTL styling.

CommentFileSizeAuthor
#9 Screenshot 2023-07-11 at 1.00.31 PM.png12.91 KBsmustgrave
#8 3335670-8.patch1.22 KBgauravvvv
#5 aftr_pat#2.png1.23 MBsonam.chaturvedi
#4 Screenshot 2023-01-24 at 10.22.16 AM.png314.68 KBgauravvvv
#3 expected_css.png1.27 MBsonam.chaturvedi
#3 after_patch#2.png1.12 MBsonam.chaturvedi
#3 bef_patch#2.png992.03 KBsonam.chaturvedi
#2 3335670-2.patch1.13 KBgauravvvv
Screenshot 2023-01-23 at 1.40.37 PM.png327.54 KBgauravvvv

Comments

Gauravvv created an issue. See original summary.

gauravvvv’s picture

gauravvvv commented
Status: Active » Needs review
StatusFileSize
new 3335670-2.patch1.13 KB

I have provided the patch for RTL dir, Please review

sonam.chaturvedi’s picture

sonam.chaturvedi commented
Status: Needs review » Needs work
StatusFileSize
new bef_patch#2.png992.03 KB
new after_patch#2.png1.12 MB
new expected_css.png1.27 MB

Verified and tested patch #2 on 10.1.x-dev. Patch applied successfully.

Test Steps:
1. Add an RTL language
2. Goto /admin/content page
3. Select "Remove content from front page" option
4. Verify icon overlaps
5. Apply patch #2 and check issue is resolved or not

Test Result: Issue is not resolved after applying patch due to padding added. Option text stills overlaps the icon in RTL.

Before Patch:
before patch

After Patch:
aftr patch

Expected:
expected

Moving to Needs Work.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
StatusFileSize
new Screenshot 2023-01-24 at 10.22.16 AM.png314.68 KB

I think you need to clear your cache, In your second screenshot, I can't see the code from patch 

[dir="rtl"] .views-bulk-actions__item .form-element--type-select {
  padding: calc(0.5rem - 1px) calc(1rem - 1px) calc(0.5rem - 1px) calc(2.25rem - 1px);
}

Please see

sonam.chaturvedi’s picture

sonam.chaturvedi commented
StatusFileSize
new aftr_pat#2.png1.23 MB

Thanks @Gauravv. I had cleared the drupal cache, however I think it was still cached.

Re-tested with new drupal 10.1.x-dev installation. And patch #2 resolves the issue.
Attaching only after patch screenshot as before patch screenshot is added in #3.

After patch:
after patch#2

smustgrave’s picture

smustgrave commented
Status: Needs review » Needs work
Issue tags: +Needs Review Queue Initiative

We have been removing rtl in the claro refactoring tickets. Should we avoid adding a new instance here?

Could be wrong.

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.

gauravvvv’s picture

gauravvvv commented
Status: Needs work » Needs review
Parent issue: » #3332698: Refactor Claro's tableselect stylesheet
StatusFileSize
new 3335670-8.patch1.22 KB

The refactor issue for tableselect has been marked as closed, allowing us to focus on addressing it within this specific issue. I have included the parent issue for reference.

I have re-rolled the patch as patch #2 is not applying anymore.

smustgrave’s picture

smustgrave commented
Priority: Normal » Minor
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screenshot 2023-07-11 at 1.00.31 PM.png12.91 KB

Confirmed the issue by installing Arabic language.
Patch #8 resolves the issue

fixed

  • lauriii committed 5cc9e951 on 11.x 
    Issue #3335670 by Gauravvvv, sonam.chaturvedi, smustgrave: Claro: Text...

  • lauriii committed 36e56d36 on 10.1.x 
    Issue #3335670 by Gauravvvv, sonam.chaturvedi, smustgrave: Claro: Text...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Fixed

Committed 5cc9e95 and pushed to 11.x. Also cherry-picked to 10.1.x. Thanks!

Status: Fixed » Closed (fixed)

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