Material-design-lite: Hamburger menu not vertically aligning with text on Android

[braeden]

If you can see at the top of the website the text does not align with the icon.

[rejhgadellaa]

Jep I'm having the same problem. I think it has to do with how the icons are used as a font. And fonts have a little space at the bottom to accomodate for letters like 'y', 'g', and 'j'. But that's completely useless for icons so it looks like the whole font idea is pretty messed up.

Here are two screenshots on how it looks on mobile (first) and larger displays (second)

As you can see, the first image (mobile) shows the bounding box (class mdl-layout__drawer-button) of the icon to sit nicely in the middle of the toolbar. But the icon is 'misaligned', it's too far up.

The second one shows that the bounding box is compensating for that. If you check the element in Chrome's dev tools you'll see that the bounding box, if you include the margins, actually _exceeds_ the toolbar. Which is pretty ugly imo.

This definitely needs works, guys.

[rejhgadellaa]

I did some more digging. Turns out that the search icon (as used in the mdl docs > components > layout > Fixed header and drawer) _does_ line up nicely on both small and large screens. The magic happens when the <i> tag is wrapped in a <label class="mdl-button mdl-js-button mdl-button--icon">

Then I noticed that the menu button doesn't do any hover effect and such and the search button does.

Did someone forget to wrap the menu button in the appropriate container when it is injected (I'm assuming that's what happens because I don't see it in the plain html, only after the browser renders the page does it pop up in the dom) into the html??

[rejhgadellaa]

And hey! There is a related issue that is closed! (okay they're talking about action icons and _mention_ the menu icon but it's the same problem: #1068 ?

[dobleuxyz]

Signed up to github just because of this issue. It's really annoying. Hopefully it gets fixed soon.

[Garbee]

We need a reproducible sample on something like codepen to diagnose this further. Typically this is due to missing <doctype html>.

[dobleuxyz]

I have the <doctype html> on my project.

http://codepen.io/babywarez/pen/PNLNXY

The issue is more evident on mobile. I don't think it's an issue related specifically to my code, since this issue is persistent across the MDL templates available on the getmdl.io website, too.

Here are 3 examples of this issue showing up on my project, and 2 of the templates of the getmdl.io website on my Nexus 6P. The 2 green squares are the same size, while the red rectangle is the extra space on the bottom of the drawer icon. It works just fine on desktop.

[ghost]

Not the best way of fixing the issue, but this media query works for me.

@media (max-width: 1024px) {.mdl-layout__drawer-button {padding-top: 2px;}}

[addyosmani]

Thanks for the repro @babywarez. This does appear to be reproducible on Chrome/Android. Will wait to see if @Garbee or @sgomes are able to similarly repro the issue.

[Garbee]

Extremely subtle on my Moto E 2nd gen, but it is present with the codepen.

Thanks for adding that @babywarez. I'll dig into this issue and get a patch out to the mdl-1.1 branch within the next day or two.

[dobleuxyz]

Great! Thanks!

[Garbee]

Fix is up. Minor line-height issue.

[braeden]

Thanks for fixing this!