Additional admin_user_info_links spill out

[trepmal]

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

<?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!)

[Otto42]

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

[Otto42]

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]

Change margin-top to -1000px

[Otto42]

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.

[nacin]

[18205]