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?

Files: 
CommentFileSizeAuthor
#17 broken-css-adds-hscrollbar-1604950-14.patch867 bytesfrob
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch broken-css-adds-hscrollbar-1604950-14_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#16 Screenshot from 2012-09-05 19:10:55.png101.39 KBtwistor
#6 admin_menu.shadowbug.6.patch677 bytesDocFX
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch admin_menu.shadowbug.6.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]
#5 admin_menu.shadow.5.patch957 bytessun
PASSED: [[SimpleTest]]: [MySQL] 228 pass(es).
[ View ]
#2 AdminMenuRC3CausingHorizontalScrollbar.png113.89 KBTor Arne Thune

Comments

Same problem to me, with Antonelli theme.

StatusFileSize
new113.89 KB

Same here on Chromium 20.

Hello,

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 !

(posted a patch, pending.)

Version:7.x-3.0-rc3» 7.x-3.x-dev
Component:CSS / Browser Support» User interface
StatusFileSize
new957 bytes
PASSED: [[SimpleTest]]: [MySQL] 228 pass(es).
[ View ]

Alright, 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.

StatusFileSize
new677 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch admin_menu.shadowbug.6.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

Hey, 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...

Status:Needs review» Needs work

The last submitted patch, admin_menu.shadowbug.6.patch, failed testing.

Title:Extra 20px padding causes horizontal scrollingSorry for the patch...
Status:Needs work» Needs review

I'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. :/

Title:Sorry for the patch...Extra 20px padding causes horizontal scrolling

Any reviews or confirmations for #5 ?

Status:Needs review» Fixed

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.

Great to hear that there is finally a solution coming. This has been disturbing me ever since I started using this mod. Good job!

Note that we can still do adjustments and tweaks to this change - as long as the new release isn't out yet.

I 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?

Status:Fixed» Needs work

(Updating status to reflect renewed discussion.)

Can you show a screenshot of a site that looks horribly ugly with the adjusted shadow? :)

StatusFileSize
new101.39 KB

Here is the particularly pronounced missing shadow on my screen. I think it is perfectly acceptable.

Status:Needs work» Needs review
StatusFileSize
new867 bytes
FAILED: [[SimpleTest]]: [MySQL] Unable to apply patch broken-css-adds-hscrollbar-1604950-14_0.patch. Unable to apply patch. See the log in the details link for more information.
[ View ]

in 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.

Status:Needs review» Needs work

The last submitted patch, broken-css-adds-hscrollbar-1604950-14.patch, failed testing.

Yeah, 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.

It 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.

body {
  overflow: hidden;
}

I 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:

#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;
}

To this:

#admin-menu {
  font: normal small "Lucida Grande", Verdana, sans-serif;
  -moz-box-shadow: 0 -10px 20px 13px #000;
  -webkit-box-shadow: 0 -10px 20px 13px #000;
  box-shadow: 0 -10px 20px 13px #000;
  right: 0;
  width: auto;
}

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. :)

Status:Needs work» Fixed

Wow, 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.

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Issue summary:View changes

removed bolding in section.