-
Notifications
You must be signed in to change notification settings - Fork 5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Hamburger icon misaligned in layout component demos #4673
Comments
This issue was introduced in commit 4944037 by @Garbee. |
Seems like a very noticeable regression. I see the cited commit was trying to fix other alignment issues with the drawer. |
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. |
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. |
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:
|
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. |
👍 |
What is the status on this? |
Pr #4675 fixes this. |
"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
The text was updated successfully, but these errors were encountered: