WordPress.org

Make WordPress Core

Opened 3 weeks ago

Last modified 3 weeks ago

#44313 new defect (bug)

/wp-admin/css/forms.css problem when adding a <select> with 'restrict_manage_users'

Reported by: pbiron Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Users Keywords: has-screenshots
Focuses: ui Cc:

Description

When current_user_can( 'promote_users' ), WP_Users_List_Table::extra_tablenav() adds a dropdown of roles and a "Change" button. All well and good; see the without_restrict_manage_users_current.png attached screen shot.

If something then hooks into restrict_manage_users and adds another dropdown, the "Change" button is located to the right of that new dropdown rather than still being next to the roles dropdown; see the restrict_manage_users_current.png attached screen shot, and the restrict_manage_users_expected.png screen shot for what I expect to see.

Attachments (3)

without_restrict_manage_users_current.png (10.7 KB) - added by pbiron 3 weeks ago.
restrict_manage_users_current.png (12.0 KB) - added by pbiron 3 weeks ago.
restrict_manage_users_expected.png (12.0 KB) - added by pbiron 3 weeks ago.

Download all attachments as: .zip

Change History (4)

#1 @pbiron
3 weeks ago

The problem is that /wp-admin/css/forms.css contains the following CSS rules:

.tablenav .actions select {
    float: left;
    margin-right: 6px;
    max-width: 200px;
}

.tablenav #changeit, .tablenav #delete_all, .tablenav #clear-recent-list, .wp-filter #delete_all {
    margin-top: 1px;
}

Notice that <select>'s are always floated left but the "Change" button is not.

The simplest fix to get something like the restrict_manage_users_expected.png screen shot is to change the CSS rule for .tablenav #changeit to:

.tablenav #changeit, .tablenav #delete_all, .tablenav #clear-recent-list, .wp-filter #delete_all {
    float: left;
    margin-right: 16px;
    margin-top: 1px;
}

However, I think a more general solution would be to float *everything* in that <div> by adding a CSS rule such as:

.tablenav .actions * {
    float: left;
}

and change the rule for .tablenav #changeit to add whitespace to its right, as in:

.tablenav #changeit, .tablenav #delete_all, .tablenav #clear-recent-list, .wp-filter #delete_all {
    margin-right: 16px;
    margin-top: 1px;
}

but that may have unintended consequences on other admin screens.

Last edited 3 weeks ago by pbiron (previous) (diff)
Note: See TracTickets for help on using tickets.