Toolbar shortcuts not displaying properly

Confirmed not showing properly in Acquia Marina or Zero Point.

Screenshots please.

In attachment, toolbar extends off right edge of screen. Is this same/related issue?

A temporary fix would be to change float right to float left instead at #admin-menu li.admin-menu-shortcuts

Thanks Kam , but the fix appeared pretty messy in my browser. What about this instead? I need help with the js though, since it currently uses one function to pop open every menu.

On hover, the adminmenu ul elements are given the property of left: auto; display: block, when this particular content menu could be left: 85% ; display: block. This would make this menu start 85% of the way across the page. The better option would be to get it to start a specific number of pixels from the right (in theory, right: 160px ; display: block), but for some reason CSS doesn't work like that -- I don't really get it, but whatever.

If I could get that to happen on mouseover, then I could make this change to the stylesheet, and things would be grand.

#admin-menu li.admin-menu-shortcuts ul {
background:transparent none repeat scroll 0 0;
display:none;
left:-999em;
line-height:1.2em;
margin:0;
position:absolute;
width:100%;
}

This is a copy of #admin-menu li ul, but with the width set to 100% instead of 160 px. This makes it so that this block goes all the way to the right-most side of the screen. So we would have it going from 85% of the way across, right to the end. Looks alright on firebug, but can't make it happen with the JS, since all menus use the same bit of code.

Anyhow, this is the js that makes that happen (from admin_menu.js), but I'm not sure how to tweak it to keep it doing the same thing on every other menu, but act different for this pesky content menu.

// Delayed mouseout.
$('li', $adminMenu).hover(function() {
  // Stop the timer.
  clearTimeout(this.sfTimer);
  // Display child lists.
  $('> ul', this).css({left: 'auto', display: 'block'})
    // Immediately hide nephew lists.
    .parent().siblings('li').children('ul').css({left: '-999em', display: 'none'});
}, function() {
  // Start the timer.
  var uls = $('> ul', this);
  this.sfTimer = setTimeout(function() {
    uls.css({left: '-999em', display: 'none'});
  }, 400);
});
};

Probably not the most elegant of solutions, but until a CSS guru comes along, this is the direction I need to take :)

If you can figure it out, lemme know!

Oy... now that I've typed it out, it seems pretty unwieldy... probably a deadend, but whatever

I can confirm screenshots from #4 in both Garland and the backported Seven

I resolved this by adding the following line in my theme's CSS. Worked on 3 themes i tried.

#admin-menu li.admin-menu-shortcuts ul {margin-left: -155px;}

also, you don't need to fix the toolbar.png issue first.

(subscribe)

Om hover this should also be set:
right: 10px

works like a charm for me in ff3.6 & ie8!

Can someone roll a proper patch for this?

Haven't got a clue how to roll a patch, yet, still learning myself moduledev.
Could someone link me to some info about it?

// Tim

Code in #9 worked for 6.x-3.x-dev (2010-Mar-12).

Patch to include code in #9.

Alternative.

Modified code in #12 worked for 6.x-3.x-dev (2010-Mar-12).

Changes:

• Not in addition to #9. Instead of #9. Redundant.
• Not just hover. Just hover displays shifting back and forth upon delay.

Code:

#admin-menu li.admin-menu-shortcuts ul {right: 10px;}

Patch:

Hey hawleyal, the one-liner css code fixed this issue for me. There is a minor issue with different font sizes though, where width should be adjusted (max-width set perhaps or width set to auto?)

Take a look at attached screenshot to see what I mean...

edit!

@klonos, #17

agree it shouldn't do that.

however, mine doesn't.

do you have the latest dev ver?

i see:

<li style="width: auto;">
<a href="#" style="display: block;">text</a>
</li>

what browser are you using?

moreover, the admin menu works okay if decrease font-size / zoom out.

totally borks on increase font-size / zoom in.

These are changes to the toolbar and should be included in admin_menu_toolbar.css rather than admin_menu.css.

This fixes the display, but I think a better question is why is this shortcut menu over on the right anyway? Isn't this where you go to logout? d7's shortcuts are all left aligned. I appreciate that admin_menu_toolbar is only half baked, but is there a convincing argument as to why the shortcuts are right aligned?

@fenstrat

Thanks for the correction.

My users were screaming at me. I just needed a quick fix.

-AH

I didn't test the latest patch. Though I wanted to mention that I started to work on this in #742184: Shortcut.module integration and identified a full range of other problems.

@hawleyal: I almost always use dev builds (wherever available). So, yes it was the latest dev version.

Furthermore, I don't think that it is browser specific, since the issue is there in both IE8 and also in different versions of fx3 (3.6.x & 3.7a3pre).

I now use the updated patch in #19 applied in admin_menu_toolbar.css. Issue still there, but remains minor as I can live with it for the time being (at least the menu doesn't go off screen now!).

Thanx for the fix!

Patch #19 by fenstrat works for me on a dozen of different themes.

patch #19 works for me

@ #9 : Brilliant, thank you!

#19 works great, but added
+ clear:both
to get the items to show underneath one another (on chrome anyway)

They're ment to be next to each other. But yeah, clear: both; on the li will place them under each other.

Subscribing...

Still getting this bug (without patch) in firefox 3.6.6 and chrome 5. tried it with bluemarine, chameleon and garland themes in Drupal 6.17

But patch seemed to fix it

Agreeing with #19. The patch works, but why is this button on the right?

Patch from #19 still works fine for me in D6.17 in all contrib and custom themes. Also I can confirm that the suggestion to add clear: both; makes the menu items display vertically (underneath one another) on fx3.6 or ie8. Thanx Michael!

@fenstrat, #27: hey Saul, I don't know what exactly you mean by saying They're ment to be next to each other (?), but having them display vertically solves another issue I often come across... If you try to move your mouse (in a rather hasty and perhaps clumsy way) to the left-most item, then the menu might disappear on you. If you don't understand what I am trying to describe, I can provide a short screencast to demonstrate it.

I know there might be concerns about this patch (I honestly don't understand why since it seems to be a no-brainer), but it seems to fix this issue for a lot of people and it's been around for 2-3 months now. So, I am setting it to RTBC to have it committed asap.

@klonos They're ment to be next to each other - As far as I can tell these shortcut menu items are meant to be horizontally aligned next to each other. The idea being to mimic the behaviour of d7's toolbar. I also understand what you're trying to describe with the mouseout issues when the items are horizontally aligned, but that's probably best solved with a suckerfish type solution to hide the menu after a short delay on mouseout. Probably outside the scope of this issue.

So yes, #19 is RTBC.

I agree on both ;)

+1 Thank you for providing the patch.

installed this patch on numerous D6 sites with various configs and it works on all Mac browsers (FF,Ch,Sfi). I say commit the thing and save me time on the next site I build.

Commit! #19

Commit! #19

Commit! #19

Thanks for all the hard work, too!

...just reporting that patch in #19 still works with latest 2010-Jul-28 dev.

Not sure why all of you are happy with #19, I'm personally not, but for now, I don't really care, because this entire thing needs to be completely revamped in #742184: Shortcut.module integration

Thanks for reporting, reviewing, and testing! Committed to all branches.

A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.

Confirming fixed in latest dev (2010-Jul-29). One less patch to maintain and re-apply on each installation after each update ;)