Hamburger icon misaligned in layout component demos

[trepidacious]

"Hamburger" icon on layouts is not aligned vertically to the text, for example on the components page.

To reproduce, view that page with the browser width large enough to show links in the layout (at smaller sizes, the responsive layouts used fix the problem). The icon is too low.

I would expect the icon to be lined up relative to the text.

MDL version 1.2.0, Chrome 52.0.2743.116 (64-bit), OS X 10.11.6

[deilv]

This issue was introduced in commit 4944037 by @Garbee.
The problem seems to be the line-height being improperly set to 56px for mobile and 64px for desktop, while the proper values should probably be 54px for mobile and 50px for desktop (this also takes margins into account).
You can see the issue live here: https://getmdl.io/components/index.html#layout-section
I would have already submitted a PR, but I would like some sort of guidance on what the proper change would be for this.

[acornejo]

Seems like a very noticeable regression. I see the cited commit was trying to fix other alignment issues with the drawer.

[Garbee]

Drawer button has a set line-height equal to the height of the drawer. But that isn't a variable so it was missed getting updated. I'll fix this ASAP and try to get a patch release done.

[Garbee]

Work-around until we land a patch release with the fix of removing the extra line-height:

@media screen and (min-width: 1025px)
.mdl-layout__drawer-button {
  line-height: 54px;
}

In your own code should do the trick. Just make sure it is imported after MDL.

[philipbrito]

I have tried the work-around commented above by @Garbee and I checked their pull request which attempts to solve this issue.

How @sgomes said, the solution yet is misaligned. In that case, the box is out of the header.

In this way, if you need fix the drawer button alignment without putting the box out of the header, you can try:

.mdl-layout__drawer-button {
     margin-top: 4px;
     margin-bottom: 4px;
} 

[Garbee]

The proper fix in the PR is to set the line-height to about 54px. That is what it currently does, so try that instead to get the right look.

[felixakiragreen]

👍

[felixakiragreen]

What is the status on this?

[Garbee]

Pr #4675 fixes this.