Toolbar not displaying properly
scottrigby - September 26, 2009 - 22:00
| Project: | Administration menu |
| Version: | 6.x-3.x-dev |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
The toolbar opens to the right, off the screen in Garland. See this comment #554124-10: D7 styles in 6.x-3.0-alpha3 (Missing toolbar.png) for (slightly) longer description with screenshots :)
PS, that issue - resolved by Dave Reid - was about a missing png, whereas this issue is just about the toolbar display.
#1
Confirmed not showing properly in Acquia Marina or Zero Point.
#2
Screenshots please.
#3
In attachment, toolbar extends off right edge of screen. Is this same/related issue?
#4
@sun: the screenshots are already in the linked issue-comment above. I didn't want to upload duplicate images (plus i deleted from my desktop). I can re-upload if absolutely necessary, but here are the links for convenience:
http://drupal.org/files/issues/554124_10_1.png
http://drupal.org/files/issues/554124_10_2.png
http://drupal.org/files/issues/554124_10_3.png
@DigitalFrontiersMedia: yes it looks like the same issue.
#5
A temporary fix would be to change float right to float left instead at #admin-menu li.admin-menu-shortcuts
#6
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 beleft: 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 to100%instead of160 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!
#7
Oy... now that I've typed it out, it seems pretty unwieldy... probably a deadend, but whatever