WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#34150 closed defect (bug) (fixed)

List Table Rollover Actions Not Working in Google Chrome

Reported by: dglingren Owned by: wonderboymusic
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Administration Keywords: has-patch
Focuses: ui, rtl Cc:
PR Number:

Description

I am testing a site with with Right To Left (RTL) text direction. When accessing the WordPress admin area in Google Chrome Version 45.0.2454.101 m, list table some rollover actions are not presented as active links.

For example, on the Pages/All Pages submenu, only the right-most "View" action is an active link. The "Edit", "Quick Edit" and "Trash" actions are "dead" - the cursor doesn't change when it passes over the text and clicking on the text has no effect.

If you remove the <span></span> tags around the actions they all become active, i.e., modify /wp-admin/class-wp-list-table.php function row_actions():

//	$out .= "<span class='$action'>$link$sep</span>";
	$out .= "$link$sep";

I also noticed that the "view" links above the table are not formatted properly. They appear as:

(Published (1 | (All (1

It looks like Chrome has a rendering problem with some <span> tags in RTL sites. Everything works properly in Firefox, Safari and Internet Explorer.

Attachments (1)

34150.patch (415 bytes) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (7)

#1 @swissspidy
4 years ago

  • Keywords reporter-feedback added

I also noticed that the "view" links above the table are not formatted properly. They appear as: (Published (1 | (All (1

AFAIK that's expected behaviour in browsers with RTL direction and English text. You can ignore that (or use a RTL language to test things).

Does the other bug you mention also exist with a RTL language like Arabic? If not, this is likely not a bug.

#2 @dglingren
4 years ago

Thanks for your quick response and for the tip on the "view" issue.

The other, more serious, issue was first reported to me by a plugin customer in Israel running a site in Hebrew, so yes, it occurs in a true RTL site.

#3 @dglingren
4 years ago

  • Keywords reporter-feedback removed

@afercia
4 years ago

#4 @afercia
4 years ago

  • Focuses ui rtl added
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 4.4
  • Version changed from 4.3.1 to 4.3

Also, the right-most link should be "Edit" :) the row-actions links should be in a reversed order compared to LTR, e.g. (in English):

View | Trash | Quick Edit | Edit

setting display: inline-block on the links fixes both issues for me, could you please test and verify? To properly test the attached patch you should run grunt build on a SVN install and then copy over the CSS files in the proper directories under src or for quick-testing just manually add the following rule in your list-tables-rtl.css file:

.rtl .row-actions a {
	display: inline-block;
}

#5 @dglingren
4 years ago

Thanks for your good work and for your patience in awaiting my response. I manually added your suggested rule to my list-tables-rtl.css file and it does indeed solve the problem. It also seems to re-order the links along the lines you suggested (both in Chrome and in Internet Explorer 11). Thanks!

#6 @wonderboymusic
4 years ago

  • Owner set to wonderboymusic
  • Resolution set to fixed
  • Status changed from new to closed

In 35566:

List Tables: fix row links CSS for RTL.

Props afercia.
Fixes #34150.

Note: See TracTickets for help on using tickets.