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?

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

bessone’s picture

Same problem to me, with Antonelli theme.

Tor Arne Thune’s picture

Same here on Chromium 20.

DocFX’s picture

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 !

DocFX’s picture

(posted a patch, pending.)

sun’s picture

Version: 7.x-3.0-rc3 » 7.x-3.x-dev
Component: CSS / Browser Support » User interface
FileSize
957 bytes

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.

DocFX’s picture

FileSize
677 bytes

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.

DocFX’s picture

Title: Extra 20px padding causes horizontal scrolling » Sorry 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. :/

sun’s picture

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

Any reviews or confirmations for #5 ?

sun’s picture

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.

P3t3r’s picture

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

sun’s picture

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

kmonty’s picture

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?

kmonty’s picture

Status: Fixed » Needs work

(Updating status to reflect renewed discussion.)

sun’s picture

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

twistor’s picture

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

frob’s picture

Status: Needs work » Needs review
FileSize
867 bytes

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.

frob’s picture

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.

xundrp’s picture

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;
}
kevinob11’s picture

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

sun’s picture

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.

Anonymous’s picture

Issue summary: View changes

removed bolding in section.