Material-design-lite: the [mdl-layout__drawer-button] icon not aligning correctly

Created on 29 Sep 2015 · 17Comments · Source: google/material-design-lite

this is run in CODE PEN
and this is run in RUNJS
and the last one is run in Chrome 45.0.2454.99 (64-bit)
1856cfd1-b196-4ad1-b047-00a8f0dab8fb

it's seem like about line-height

sorry about my poor english skill

Layout

Source

vose2008

Most helpful comment

fixed my issue too.
CSS is the devil...
Thanks for sharing.

leonardoporro on 17 Dec 2016

👍3

All 17 comments

Thanks for your bug report. What OS are you experiencing this on? On Mac / Chrome 45 + 46 I'm seeing this:

addyosmani on 29 Sep 2015

ye on Mac 10.10.5 / Chrome 45.0.2454.99 (64-bit)

vose2008 on 29 Sep 2015

Thx. @sgomes or @surma can you try reproducing on your machines?

addyosmani on 29 Sep 2015

I'm having trouble with the links in the original issue, @addyosmani. How did you get to the preview?

sgomes on 29 Sep 2015

I used the second link. The first Codepen is busted :)

addyosmani on 29 Sep 2015

The exact same code causes no issues in codepen. I'm currently investigating why, but I'd say the problem is something to do with runjs.cn

sgomes on 30 Sep 2015

RunJS looks completely busted for me:
screenshot 2015-09-30 16 37 38

surma on 30 Sep 2015

I see the same issues across all browsers in RunJS. I'm closing the bug because it seems apparent it's an issue with the site.

sgomes on 30 Sep 2015

guys it's my fault, i apologize for the LINK about CodePen, in fact CodePen are working fine, but not work well on my own project and RUNJS. The other platform i didn't test.

CodePen here again
And actually the problem with @sgomes & @surma on RunJS.cn maybe because of the GFW ( china great fire wall ) , it may let some resources can't loading . Thus your can't see the right page preview, except layout problem like my picture. ( i guess... )
Last the problem of my commented. the code was i write or copy form MDL all of them have same problem likes my picture.

thanks all of you in any way

vose2008 on 30 Sep 2015

closed .... but ..... but ... the picture are cut of form Chrome.
sadly face ( TAT ) @addyosmani

vose2008 on 30 Sep 2015

I had same trouble on Mac Chrome 46. I did 2 steps and had trouble.

copy the source from reference
open it on Chrome.
It seems that the line-height of "mdl-layout__drawer-button"(50px) doesn't affect for calculating vertical-align of "material-icons".
I found workaround that adding style as follows.

.mdl-layout__drawer-button:before {
    content: '';
}

sorry about my poor english skill too!

mwatanabe on 29 Oct 2015

YES, i run my local project and in RUNJS both have same problem, but sgomes think it's RUNJS's is borken not MDL's problem, So he close this issues. i suggested that, build a new issue and link it to this issue. the present situation we were subject to,i completely think it is a bug.
是的呀，我本地测试和在runjs 上测试都是错了的，但sgomes 单单看了我runjs 上的例子就认为是 runjs 的问题... 所以呐，我建议你再开一个 issue 附带我这个链接，证明我们俩遇到了同样地问题。

vose2008 on 4 Nov 2015

This was an issue for me and @mwatanabe's workaround solved it for me.