Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
I noticed when logged in there's an extra 20px of horizontal scrolling when using admin_menu_toolbar. I tracked it down to line 29 in admin_menu_toolbar.css
#admin-menu {
font: normal small "Lucida Grande", Verdana, sans-serif;
margin: 0 -20px;
padding: 0 20px;
-moz-box-shadow: 0 3px 20px #000;
-webkit-box-shadow: 0 3px 20px #000;
box-shadow: 0 3px 20px #000;
right: 0;
width: auto;
}
If I remove the extra margin and padding there's no horizontal scrolling. Could those styles get removed safely?
Comment | File | Size | Author |
---|---|---|---|
#17 | broken-css-adds-hscrollbar-1604950-14.patch | 867 bytes | frob |
#16 | Screenshot from 2012-09-05 19:10:55.png | 101.39 KB | twistor |
#6 | admin_menu.shadowbug.6.patch | 677 bytes | DocFX |
#5 | admin_menu.shadow.5.patch | 957 bytes | sun |
#2 | AdminMenuRC3CausingHorizontalScrollbar.png | 113.89 KB | Tor Arne Thune |
Comments
Comment #1
bessone CreditAttribution: bessone commentedSame problem to me, with Antonelli theme.
Comment #2
Tor Arne Thune CreditAttribution: Tor Arne Thune commentedSame here on Chromium 20.
Comment #3
DocFX CreditAttribution: DocFX commentedHello,
I suggest that line 29 should be patched as follow.
#admin-menu {
-webkit-box-shadow: 8px 2px 16px #000000;
-moz-box-shadow: 8px 2px 16px #000000;
box-shadow: 8px 2px 16px #000000;
font: small "Lucida Grande",Verdana,sans-serif;
margin: 0 0 0 -20px;
padding: 0 0 0 20px;
right: 0;
width: auto;
}
Keep up the good work on that project ! Thanks !
Comment #4
DocFX CreditAttribution: DocFX commented(posted a patch, pending.)
Comment #5
sunAlright, I'm getting sick of these issues, so let's diverge from core Toolbar's insane shadow quirks ;)
Long ago, a design review of the core Toolbar criticized that the box shadow would end too early on the outer edges of the toolbar (i.e., far to the left and far to the right). That's primarily caused by the 20px radius of the shadow. To resolve that, the negative-margin + padding hack was added.
In all seriousness, I doubt that anyone but overly nitpicky and pedantic designers would ever notice that glitch.
Furthermore, the 20px radius on its own always bugged me in the first place, as it overlaps and shades elements when scrolling down the page.
So, attached patch removes the margin/padding hack, decreases the shadow radius, and slightly lightens it up, since the smaller radius inherently makes the shadow darker.
Would love to see some manual testing/reviews and confirmations before committing this patch.
Comment #6
DocFX CreditAttribution: DocFX commentedHey, sorry I'm late, was busy this noon. Just proposing a patch for the first time... Not yet used to git.
Hope I respect the naming conventions and such... That's quite new to me. Apologize in advance.
If you still need it...
Comment #8
DocFX CreditAttribution: DocFX commentedI've checked to tutorial : http://drupal.org/node/1054616
But I can't find out why my patch failed. Except it has fewer lines of context.
@sun : could you be of any help with that? I'm kinda lost. :/
Comment #9
sunAny reviews or confirmations for #5 ?
Comment #10
sunThanks 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.
Comment #11
P3t3r CreditAttribution: P3t3r commentedGreat to hear that there is finally a solution coming. This has been disturbing me ever since I started using this mod. Good job!
Comment #12
sunNote that we can still do adjustments and tweaks to this change - as long as the new release isn't out yet.
Comment #13
kmontyI know this is being nit-picky, but I really object to the snap decision to not apply the drop-shadow to the entire length of the admin bar. On a white background, that white space in the corners is particularly pronounced.
#1604950: Admin menu CSS causes horizontal scrollbar (which is an older issue + more active discussion) has a patch that has been vetted pretty thoroughly, doesn't impact design while working cross browser, cross theme, and RTL.
If we want to decrease the size of the drop-shadow, maybe we can take that up in a separate issue, rather than making a haste decision that sacrifices design in favor of Getting It Done Now?
Comment #14
kmonty(Updating status to reflect renewed discussion.)
Comment #15
sunCan you show a screenshot of a site that looks horribly ugly with the adjusted shadow? :)
Comment #16
twistor CreditAttribution: twistor commentedHere is the particularly pronounced missing shadow on my screen. I think it is perfectly acceptable.
Comment #17
frobin comment 12 Sun asked for tweaking. I am posting my patch from the issue mentioned in comment 13. I am only bring it up because this is still an issue and I am still getting notifications about the patch working.
I didn't re-roll it. Just posting it here because the other issue was marked as a duplicate.
Comment #19
frobYeah, I didn't expect it to pass review.
Like I said I didn't re-roll it. I don't care which one is used so long as one of them makes it into the next version of module.
Comment #20
xundrp CreditAttribution: xundrp commentedIt happens because default 'overflow' CSS property for <body> is 'visible'. Themes (e.g. Seven) often do not override default value. Change it to 'hidden' and the horizontal scrollbar disappears.
Comment #21
kevinob11 CreditAttribution: kevinob11 commentedI just came upon this and may be missing something, but can't this be fixed pretty easily by just using the spread setting for box-shadow?
I just changed the css from this:
To this:
Negative -10 and +13 probably aren't necessary, they likely could be -3 and +6, but I wanted to make sure I didn't miss any of the corners. :)
Comment #22
sunWow, genius! :)
@kevinob11, we need more of you in Drupal core. Please contribute!
Thanks for reporting, reviewing, and testing! Committed and pushed.
A new development snapshot will be available within the next 12 hours. This improvement will be available in the next official release.
Comment #23.0
(not verified) CreditAttribution: commentedremoved bolding in
section.