WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 19 months ago

Last modified 19 months ago

#26720 closed defect (bug) (fixed)

Front-end admin-bar dropdown menu overlap when screen size between 600px and 782px for logged in user with Buddypress submenus

Reported by: undergroundnetwork Owned by: nacin
Milestone: 3.8.1 Priority: normal
Severity: normal Version: 3.8
Component: Toolbar Keywords: has-patch commit fixed-major
Focuses: ui Cc:

Description

When Buddypress 1.9 is active on a Wordpress 3.8 website and the screen size is between 600px and 782px there is overlap in the drop-down right side menu for all of the secondary logged in Buddypress menu items, like Activity, Profile, etc.

I have attached a screenshot of this happening on the actual Buddypress.org website, so it is an issue with the actual css of Wordpress's admin-bar.css

To recreate it, log into a Wordpress site that also has Buddypress installed, adjust your browser width to between 600 and 782 then mouse-over the upper right corner menu, then mouse down to any activity menu item and you will see the overlap. You can recreate it at the actual Buddypress.org website as well by also logging in and doing the same.

This occurs on Safari, Firefox, and Chrome (on the Mac, not sure about PC) and the iPad (which has a screen size between those sizes which is how I discovered it.)

Here is a snapshot of the overlap occurring on the Buddypress.org site, to show that it is not a theme or user issue:

http://media.underground.net/images/bpoverlap.png

I posted this over in the Buddypress Bug Trac site (http://buddypress.trac.wordpress.org/ticket/5312) thinking it was in the Buddypress plugin, but have since determined that it is in the Wordpress core css files.

Here is a simple fix for the problem.

In the Wordpress core file: wp-includes/css/admin-bar.css move lines 1040-1043

#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
right: 0;
left: auto;
}

out of the @media screen and ( max-width: 782px ) { area and place them in the @media screen and (max-width: 600px) { area.
So cut the above css out and paste it right after:
@media screen and (max-width: 600px) { so you end up with:

@media screen and (max-width: 600px) {
#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper {
right: 0;
left: auto;
}

This should also be done in the minified version of the same css file.
wp-includes/css/admin-bar.min.css lines 909-912
Search for:

#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper{right:0;left:auto}

cut it out and place it right after

@media screen and (max-width: 600px) {

so you end up with:

@media screen and (max-width: 600px) {#wpadminbar #wp-admin-bar-my-account .ab-sub-wrapper{right:0;left:auto}

That fixes the issue in the Wordpress admin css files.

In the mean-time, if a person wants to stop this from happening and doesn't want to alter the core css files, I came up with a CSS override that can be placed in the person's theme style.css. Not sure if this is the best temporary solution, but it seems to work for me:

@media (min-width: 601px)
{
#wpadminbar .ab-top-secondary .menupop li:hover>.ab-sub-wrapper, #wpadminbar .ab-top-secondary .menupop li.hover>.ab-sub-wrapper {
margin-left: 0 !important;
right: 100% !important;

}
}

Attachments (3)

before.png (39.7 KB) - added by iammattthomas 19 months ago.
after-mobile.png (36.3 KB) - added by iammattthomas 19 months ago.
after-tablet.png (49.1 KB) - added by iammattthomas 19 months ago.

Download all attachments as: .zip

Change History (13)

comment:1 @nacin20 months ago

  • Component changed from General to Toolbar
  • Keywords ui-focus added
  • Milestone changed from Awaiting Review to 3.8.1
  • Owner set to nacin
  • Status changed from new to assigned

Thanks for the report, undergroundnetwork.

comment:2 @ircbot19 months ago

This ticket was mentioned in IRC in #wordpress-dev by nacin. View the logs.

comment:3 @nacin19 months ago

  • Milestone changed from 3.8.1 to 3.8.2

Shifting this to 3.8.2 for further investigation. Currently have iammattthomas looking into it.

comment:4 @iammattthomas19 months ago

It looks like those two CSS rules are duplicated; right: 0; left: auto is already set for .ab-sub-wrapper on line 161. Just removing it from the 782px media query seems to solve this.

comment:5 @iammattthomas19 months ago

Fixing this exposed two other issues: at responsive sizes, the arrows indicating submenus were misaligned with the text, and at smartphone sizes, the submenus were hidden because they were being positioned outside the parent element.

comment:6 @iammattthomas19 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 27006:

Responsive improvements to submenus in the adminbar:

  • Remove .ab-sub-wrapper rules in the 782px media query, as they're duplicates of the rules set on line 161.
  • Reposition the arrows for submenus at responsive sizes where the menus are taller.
  • Set the submenu position to static at smartphone sizes, so it's not positioned outside of its parent (and thus offscreen).

Fixes #26720, props undergroundnetwork, iammattthomas.

@iammattthomas19 months ago

comment:7 @nacin19 months ago

  • Keywords has-patch commit fixed-major added
  • Milestone changed from 3.8.2 to 3.8.1
  • Resolution fixed deleted
  • Status changed from closed to reopened

comment:8 @nacin19 months ago

Per IRC: iammattthomas tested this with both BuddyPress and multisite, both of which have their share of sub-menus.

comment:9 @nacin19 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 27009:

Responsive improvements to submenus in the toolbar.

Merges [27006] to the 3.8 branch.

  • Remove .ab-sub-wrapper rules in the 782px media query, as they're duplicates of the rules set on line 161.
  • Reposition the arrows for submenus at responsive sizes where the menus are taller.
  • Set the submenu position to static at smartphone sizes, so it's not positioned outside of its parent (and thus offscreen).

props undergroundnetwork, iammattthomas.
fixes #26720.

comment:10 @johnjamesjacoby19 months ago

Confirmed fixed in 3.8 branch.

Also tweaked the BuddyPress.org and bbPress.org themes to better accommodate the larger toolbar height and recent z-index changes, fixing unexpected #header overlap in the above screenshots.

Thanks for helping!

Note: See TracTickets for help on using tickets.