WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 7 years ago

#17418 closed defect (bug) (fixed)

Additional admin_user_info_links spill out

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

Description

Extra links (even just one) added through the admin_user_info_links filter don't fit.
http://img685.imageshack.us/img685/2578/adminuserinfolinks.png

<?php
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 7 years ago.
Change margin-top to -1000px

Download all attachments as: .zip

Change History (8)

#1 @Otto42
7 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
7 years ago

The reason this is happening is because of this CSS code in wp-admin.dev.css:

#user_info.active #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.

@Otto42
7 years ago

Change margin-top to -1000px

#3 @Otto42
7 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
7 years ago

  • Milestone changed from Awaiting Review to 3.2

#5 @ryan
7 years ago

  • Keywords ux-feedback added

#6 @ryan
7 years ago

  • Keywords ux-feedback removed

#7 @nacin
7 years ago

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