WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#26430 closed defect (bug) (fixed)

Toolbar: in small screens any plugin output breaks toolbar layout

Reported by: lancewillett Owned by: iammattthomas
Milestone: 3.8 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: needs-patch
Focuses: Cc:

Description

What I expected to happen

When activating a plugin, it often adds text or icons to the toolbar. I'd expect them to not change the view or break the layout in small screens, like a mobile phone.

What actually happened

When I activated a plugin, and viewed the front-end of my site -- logged in -- with a mobile device, the layout was broken: the main content didn't fill the screen and my avatar was off the toolbar in the right gutter (see screenshot).

Steps to repeat

This only happens when logged in, and toolbar appears.

  1. Latest trunk WP
  2. Install and activate http://wordpress.org/plugins/rtl-tester/
  3. Logged in, go to front-end on an iPhone
  4. See broken toolbar: https://cloudup.com/cYLn6HBAEAG+

The text added by the plugin to the toolbar "Switch to RTL" breaks the layout.

Device and testing details

Tested with iPhone 5 in portrait and landscape mode on a self-hosted WP site running trunk and Twenty Fourteen, http://themebreaker.wordpress.net/. Only active plugin is RTL Tester.

Attachments (2)

rtl-tester-toolbar.jpg (192.0 KB) - added by lancewillett 5 years ago.
26430.diff (513 bytes) - added by Jayjdk 5 years ago.

Download all attachments as: .zip

Change History (11)

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 3.8

#2 @nacin
5 years ago

  • Cc iammattthomas added

I had mentioned this to MT; the prevailing thought was that maybe on tiny screens, we should instead hide all menus and explicitly only show the six we've chosen. Seems like that would work fine here. For more: #26071.

#3 @iamtakashi
5 years ago

  • Cc takashi@… added

#4 @iammattthomas
5 years ago

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

In 26678:

By default, hide all adminbar links at responsive sizes and selectively un-hide just the essential core items. Fixes #26430.

#5 follow-up: @iammattthomas
5 years ago

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

#6 @DrewAPicture
5 years ago

I wonder if there's a way to make this a tiny bit more dynamic, even using something like a filter. I don't know.

Just seems odd that you now have to institute a CSS override just to show or hide toolbar items — items added via an API and hidden via CSS. Weird.

#7 @iammattthomas
5 years ago

The idea here is that there's no room on mobile devices for *any* additional items to be added by plugins, etc. So nothing should attempt to override this CSS; the point is to hide anything that's not an essential core link so that links added by plugins don't force the toolbar to wrap to two lines.

#8 in reply to: ↑ 5 @Jayjdk
5 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Replying to iammattthomas:

In 26680:

Allow dropdown lists to appear in responsive states; reset the minimum width of dropdowns at responsive sizes. See #26430.

intrinsic is an old webkit value, the new one is fit-content (https://developer.mozilla.org/en-US/docs/Web/CSS/width#Values).

fit-content will work in Firefox as well. Currently it requires vendor prefixes (http://caniuse.com/#search=intrinsic)

#wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { 
   min-width: intrinsic;
   min-width: -webkit-fit-content;
   min-width: -moz-fit-content; 
   min-width: fit-content; 
}


I've attached a patch.

@Jayjdk
5 years ago

#9 @iammattthomas
5 years ago

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

In 26735:

Add new fit-content rules to accompany intrinsic width on adminbar dropdown wrappers. Fixes #26430, props Jayjdk.

Note: See TracTickets for help on using tickets.