WordPress.org

Make WordPress Core

Opened 5 years ago

Last modified 2 years ago

#28983 new defect (bug)

Admin bar length or Admin bar on two line

Reported by: korobochkin Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.3
Component: Toolbar Keywords: has-patch needs-testing
Focuses: ui Cc:

Description

On some sites I see the bad admin bar.

http://f.cl.ly/items/2Y372s072P0k2t1H142q/Screen-Shot-2014-07-22-at-14.58.10.png

And this without any external plugins stuff (Jetpack Statistic for example), except that buddy press notification counter.

The possible solutions, if screen too small:

  1. Leave only icons (like on mobile screens).
  2. Crop user name:
    • Hello, Kolya Korobochkin [avatar]
    • Hello, Kolya [avatar]
    • Hello [avatar]
    • [avatar]
  3. Admin bar on two lines (maybe hard to do, because #wpadminbar have static height and position: fixed).
  4. Add horizontal scroll without visible scrollbar (scrolling with mouse press and pull).

All options required JS and I'm sorry.

Attachments (1)

responsive-admin-bar.diff (2.7 KB) - added by terminalpixel 3 years ago.
Patch to use flexbox within the admin bar

Download all attachments as: .zip

Change History (5)

#1 @SergeyBiryukov
5 years ago

  • Component changed from Menus to Toolbar

#2 @morganestes
4 years ago

  • Keywords needs-patch reporter-feedback added

Thanks for the ticket @korobochkin. Have you found that this happens at a consistent width with all plugins disabled, or does it depend on plugins that add menu items of different lengths?

#3 @afercia
4 years ago

  • Keywords reporter-feedback removed
  • Milestone changed from Awaiting Review to Future Release
  • Version changed from 3.9.1 to 4.3

There's no need for additional menu items to reproduce this, some languages have longer strings than the English ones, not to mention users may choose to display their (potentially very long) full name so there's just not enough space before the responsive media query kicks in.

https://cldup.com/qU-s0Bo2q4.png

Probably there's not a complete solution to this but maybe setting a max-width and using text-overflow: ellipsis; on the username link could help?
Not sure when this was introduced, setting version to 4.3.

@terminalpixel
3 years ago

Patch to use flexbox within the admin bar

#4 @terminalpixel
3 years ago

  • Keywords has-patch needs-testing added; needs-patch removed

I've created a fix for this that uses flexbox.

It is far from ideal but I think it is less buggy than the current issue. I cannot see a simple way to get a better result without either using JavaScript or reworking the admin bar html.

It should probably be tested with older browsers and plugins that make use of the admin bar.

https://i.imgur.com/Zjz9gMs.jpg

Note: See TracTickets for help on using tickets.