Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#17418 closed defect (bug) (fixed)

Additional admin_user_info_links spill out

Reported by: trepmal's profile trepmal Owned by:
Milestone: 3.2 Priority: normal
Severity: normal Version: 3.2
Component: UI Keywords: has-patch
Focuses: Cc:


Extra links (even just one) added through the admin_user_info_links filter don't fit.

add_filter( 'admin_user_info_links', 'howdy_links', 10 );
function howdy_links( $links ) {
	$links[] = '<a href="'. admin_url('options.php') .'">All Settings</a>';
	$links[] = '<a href="#">Alpha</a>';
	$links[] = '<a href="#">Beta</a>';
	return $links;

happens in all browsers that I've checked so far: Firefox 4 (OSX), Chrome 12 (OSX), IE8 (XP)

(I'm trying to be a more effective ticket-submitter, please tell me how I can improve!)

Attachments (1)

17418.diff (126.9 KB) - added by Otto42 12 years ago.
Change margin-top to -1000px

Download all attachments as: .zip

Change History (8)

#1 @Otto42
12 years ago

Confirmed, ran into this today with a couple of my plugins which add various links to this space (SFC and STC).

#2 @Otto42
12 years ago

The reason this is happening is because of this CSS code in #user_info_links ul {
	margin-top: 0;
	-moz-transition: margin-top 150ms ease-out;
	-webkit-transition: margin-top 150ms ease-out;
	-o-transition: margin-top 150ms ease-out;
	transition: margin-top 150ms ease-out;

#user_info_links ul {
	border-width: 1px;
	border-style: solid;
	margin-top: -100%;
	-moz-transition: margin-top 250ms ease-in;
	-webkit-transition: margin-top 250ms ease-in;
	-o-transition: margin-top 250ms ease-in;
	transition: margin-top 250ms ease-in;

The CSS transition is what is scrolling this div in and out. The problem is that it's using the margin-top to do it, and it's transitioning to margin-top:-100% to scroll it in. When using a percentage value on a margin, any margin, browsers treat it as a percentage of the *width*. They're not smart enough to apply it as a percentage of the height on top/bottom margins.

So the fact that this works at all is a bit of a fluke. The width happens to be larger than the default height, but when you start adding items to it, the height gets bigger and the margin-top:-100% isn't enough to hide it anymore.

Looking for alternatives now.

12 years ago

Change margin-top to -1000px

#3 @Otto42
12 years ago

  • Keywords has-patch added

After trying several different CSS and Javascript approaches, I've determined that due to lack of browser support for percentage based animated transitions, there's no good solution to this. So I took the cheap way out and made it move 1000px up instead.

A 1000px transition will cover up about 40 additional menu items there, and if you have that many, well, it'll break, but that's better than now with it breaking with only adding 3 items. Also, having it only move 1000px doesn't really affect the transition speed noticeably. The ease-in ease-out transitions start getting noticeably affected at around 2500px.

#4 @ryan
12 years ago

  • Milestone changed from Awaiting Review to 3.2

#5 @ryan
12 years ago

  • Keywords ux-feedback added

#6 @ryan
12 years ago

  • Keywords ux-feedback removed

#7 @nacin
12 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.