Steps to Reproduce:
1. Launch a Drupal 8 web page.
2. Select Content.
3. Select the Status field.
4. Select the Title field.

Observed behavior: There is smudge on the last letters of the Title and Status fields when they're selected.

Expected behavior: There is no smudge on any letters of the Title and Status fields.

Additional Notes: This was tested on an iPhone 6 running iOS version 8.2.

CommentFileSizeAuthor
#33 2566495-icon-issue-after-patch.png62.93 KBHarish1688
#33 2566495-icon-issue-before-patch.png95.19 KBHarish1688
#30 drupal-graphical-error-2566495-30.patch1.23 KBawset
Graphical Error on Drupal on Mobile.jpg109.81 KBBrandonHeidMG
#3 graphical_error_in_text-2566495-3.patch396 bytesmaartendeblock
#6 graphical_error_in_text-2566495-6.patch325 bytesmaartendeblock
#11 graphical_error_in_text-2566495-11.patch362 bytesmaartendeblock
#25 Before-Title.png106.02 KBSatyajit1990
#25 After-Patch.png113.19 KBSatyajit1990
#29 drupal-graphical-error-2566495-29.patch1.18 KBawset
#29 with-patch-ltr.png44.67 KBawset
#29 with-patch-rtl.png44.16 KBawset

Issue fork seven-2566495

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

BrandonHeidMG created an issue. See original summary.

swentel’s picture

swentel commented
Version: 8.0.0-beta15 » 8.0.x-dev
Component: field system » Seven theme
maartendeblock’s picture

maartendeblock commented
Assigned: Unassigned » maartendeblock
Status: Active » Needs review
StatusFileSize
new graphical_error_in_text-2566495-3.patch396 bytes

The 'smudge' is the up/down arrow for the sorting.

On small screens it gets pushed down now.

swentel’s picture

swentel commented 
+++ b/core/themes/seven/style.css
@@ -553,6 +553,10 @@ table.system-status-report tr.error {
+  ¶

space

Status: Needs review » Needs work

The last submitted patch, 3: graphical_error_in_text-2566495-3.patch, failed testing.

maartendeblock’s picture

maartendeblock commented
StatusFileSize
new graphical_error_in_text-2566495-6.patch325 bytes
maartendeblock’s picture

maartendeblock commented
Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 6: graphical_error_in_text-2566495-6.patch, failed testing.

The last submitted patch, 3: graphical_error_in_text-2566495-3.patch, failed testing.

The last submitted patch, 6: graphical_error_in_text-2566495-6.patch, failed testing.

maartendeblock’s picture

maartendeblock commented
Status: Needs work » Needs review
StatusFileSize
new graphical_error_in_text-2566495-11.patch362 bytes

Previous patch was against wrong head. This one should be correct.

Status: Needs review » Needs work

The last submitted patch, 11: graphical_error_in_text-2566495-11.patch, failed testing.

Status: Needs work » Needs review

maartendeblock queued 11: graphical_error_in_text-2566495-11.patch for re-testing.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.2.x-dev

Drupal 8 is end-of-life as of November 17, 2021. There will not be further changes made to Drupal 8. Bugfixes are now made to the 9.3.x and higher branches only. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.2.x-dev » 9.3.x-dev
kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Version: 9.3.x-dev » 9.4.x-dev
Assigned: maartendeblock » Unassigned
Issue tags: +Bug Smash Initiative, +Needs manual testing

Given the age of this issue, it may not be a problem anymore.

It would be good to test this on 9.4 (without the patch) to see if it can be reproduced. If not, we can close this issue.

Satyajit1990’s picture

Satyajit1990 commented
Issue summary: View changes
StatusFileSize
new Before-Title.png106.02 KB
new After-Patch.png113.19 KB

Hi @Kristen Pol,
Verified the issue without patch and with patch (https://www.drupal.org/files/issues/graphical_error_in_text-2566495-11.p...)
Issue still persist.

Before :
After :

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Needs review » Needs work
Issue tags: -Needs manual testing

Thanks for testing @Satyajit1990. I also confirmed the patch in #11 doesn't fix the issue. Back to needs work.

andregp’s picture

andregp commented

I tried to fix it but after several tried I didn't manage to find a solution. But here is what I discovered so far:

That's the part of the code relative to the "Title" component (see #25 first image)

<th id="view-title-table-column" class="views-field views-field-title is-active" scope="col">
  <a href="?title=&amp;type=All&amp;status=All&amp;langcode=All&amp;order=title&amp;sort=asc" title="sort by Title" rel="nofollow">Title
    <span class="tablesort tablesort--asc">
      <span class="visually-hidden">
        Sort ascending
      </span>
    </span>
    ::after /* <-- this is where the bottom line is placed */
  </a>
</th>

-- The bottom line comes from a pseudo-element th > a:after (see /seven/css/components/tables.css line 73-87)
-- The span has the .tablesort class which has the float: right attribute. This is what allows the small sort arrow to be always aligned to the left, but it also causes the arrow to be overflown by the bottom line.

I tried adding/changing attributes from the elements but couldn't solve the issue with this approach. Re-wrapping the elements on a different way seems to be the way to go here, but I was afraid of breaking the code somehow as I'm not used to working with twig templates, so I'm leaving this to a more experienced developer.

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.

awset’s picture

awset commented
Issue summary: View changes
StatusFileSize
new with-patch-rtl.png44.16 KB
new with-patch-ltr.png44.67 KB
new drupal-graphical-error-2566495-29.patch1.18 KB

hi all thanks for the test above to verify the issue on latest drupal 9.4.
I can confirm it is an issue in 9.5 as well.

I provided a new patch to fix this.
the theme is supporting RTL and LTR text, so please make sure to test this as well.

below is the test I did locally with the new patch above.

With patch in Drupal 9.5.x

Direction LTR Direction RTL

it maybe more make sense to help testing this issue in real RTL language.

thanks.

awset’s picture

awset commented
StatusFileSize
new drupal-graphical-error-2566495-30.patch1.23 KB

Fix custom command.

awset’s picture

awset commented
awset’s picture

awset commented
Status: Needs work » Needs review
Harish1688’s picture

Harish1688 commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 2566495-icon-issue-before-patch.png95.19 KB
new 2566495-icon-issue-after-patch.png62.93 KB

Tested the patch (drupal-graphical-error-2566495-30.patch) with Drupal 9.5. working fine, looks good for RTBC.
screenshot attached

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented
Status: Reviewed & tested by the community » Postponed

We're actively trying to deprecate the Seven theme, so postponing this in the meantime.
Once we move it to contrib, we may choose to unpostpone this issue.

longwave’s picture

longwave
he/him
Primary language English
Location UK
commented
Project: Drupal core » Seven
Version: 9.5.x-dev » 1.0.0-alpha1
Component: Seven theme » Code
Status: Postponed » Needs review

The Seven theme has been removed from Drupal 10 core. I confirmed that this issue only affects Seven and no other themes included with Drupal core, so I am moving this to the contributed Seven project.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Title: Graphical error in text when selecting different column fields on the content page on mobile » Move the sorting up/down arrow
Version: 1.0.0-alpha1 » 2.0.x-dev
Category: Bug report » Task
Priority: Minor » Normal
Status: Needs review » Needs work
Issue tags: +Needs merge request

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

immaculatexavier opened merge request !100

immaculatexavier’s picture

immaculatexavier commented
Status: Needs work » Needs review
avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Needs review » Reviewed & tested by the community

I checked on the live preview: The reported issue has been fixed.

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Issue tags: -Needs merge request

avpaderno’s picture

avpaderno
he/him
Primary language Italian
Location Brescia, 🇮🇹 🇪🇺
commented
Status: Reviewed & tested by the community » Fixed

Thank you! The changes have been applied to the 2.0.x branch.

Status: Fixed » Closed (fixed)

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