Default index.html navbar and button being overlapped

[matthardwick]

Forgive me i'm still a novice but can't seem to find the answer anywhere. After a fresh install of WSK (no errors) both chrome and IE11 are displaying part of the navbar and the pink button being overlapped by something. I've fiddled with some z-index values but can't seem to find a fix for any of the different media queries.

[kennith]

I downloaded the material.indigo-pink.min.css, placed it under app/styles/ and change the index.html from

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">

to

<link rel="stylesheet" href="styles/material.indigo-pink.min.css">

The layout are in correct places.

Before:

After:

I don't know what causes this behavior. :confused:

[matthardwick]

the fix worked perfectly for me, but i can't figure out why either

[LeeLueken]

Same issue here (total noob here, by the way), but I hesitate to try the fix mentioned above, as it does not seem to have the correct layout, though it seems a lot better than what we've all seen out of the box. I'm getting exactly what matthardwick is showing in his original post. Funny thing is when I open the file without it being served via gulp, it appears like this (which I assume to be proper layout, but could be wrong): I'm really dying to get this to behave as intended, and want to avoid hacking it into submission (to avoid odd behavior down the road) if I can. Anyone have any other ideas? Thanks in advance.

[addyosmani]

Hey folks. If the issue here is strictly layout related, can you file a bug against http://github.com/google/material-design-lite (Material Design Lite, our sister project, houses the original layout). If it's build process related, the bug would be for WSK.

[1na]

Hey, I think it is not strictly a layout problem. Serving the files of the web starter kit from the app folder with python -m SimpleHTTPServer 3000 will give the correct layout (as is shown for example on the mdl website under templates, see https://getmdl.io/templates/index.html). Serving the files with gulp serve from the root folder of the project (web-starter-kit in my case) will give a clipped layout. It seems therefore that the build proces is involved in this issue, but I don't know how. I think a small screen scrolling tab-bar is incorrectly added in the build proces. I would like to find out what is going on too, but I am not familiar with gulp. Any insights appreciated.

Regards, Louis

Op za 18 jun. 2016 om 20:11 schreef Addy Osmani notifications@github.com:

Hey folks. If the issue here is strictly layout related, can you file a bug against http://github.com/google/material-design-lite https://github.com/google/material-design-lite (Material Design Lite, our sister project, houses the original layout). If it's build process related, the bug would be for WSK.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/google/web-starter-kit/issues/871#issuecomment-226956679, or mute the thread https://github.com/notifications/unsubscribe/AMG3ymYuUOtEvNs8nadeiHIWx0f2q-cYks5qNDTXgaJpZM4I1rv0 .

Met vriendelijke groeten, Louis Chaillet

[LeeLueken]

Thanks, addyosmani, for your input, but I am not sure it's a bug necessarily. I used to work QA for a game company, and know how unwelcome bugs that are not actually bugs are. :) I don't know if it's a hint or not, but when I view the CSS output between the gulp served page and the un-served one that I simply open from the directory there are definitely differences:

for instance, if (on the gulp-served page) I toggle .mdl-layout__tab-bar-button's display property to "none" (from "inline block), which is apparently what is happening via an override coming from main.css (33) on the unserved file, the menu container appears to reach both sides. The served document does not appear to be picking up the rule that produces this override on main.css, though the font-family is being grabbed from the same file. I hope this helps narrow it down, and if it is a bug, I'll try to post it to the relevant forum. Many thanks again!

[1na]

Hi thanks for all the work on this point. I geuss I am missing somethink. I pulled the changed branch with #876. I checked the UnCSS is actually gone, but when i serve these pages (gulp serve) I still get the clipped tab-bar. Could you help me out please? I don't know what I do wrong.

Regards, Louis

Op za 18 jun. 2016 om 21:26 schreef LeeLueken notifications@github.com:

Thanks, addyosamani, for your input, but I am not sure it's a bug necessarily. I used to work QA for a game company, and know how unwelcome bugs that are not actually bugs are. :) I don't know if it's a hint or not, but when I view the CSS output between the gulp served page and the un-served one that I simply open from the directory there are definitely differences:

[image: untitled] https://cloud.githubusercontent.com/assets/20016848/16173174/578e33bc-3567-11e6-94b5-33af9a52d8be.png

for instance, if I toggle .mdl-layout__tab-bar-button's display property to "none" (from "inline block), which is apparently what is happening via an override coming from main.css (33) on the unserved file, the menu container appears to reach both sides. The served document does not appear to be picking up the rule that produces this override on main.css, though the font-family is being grabbed from the same file. I hope this helps narrow it down, and if it is a bug, I'll try to post it to the relevant forum. Many thanks again!

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/google/web-starter-kit/issues/871#issuecomment-226960561, or mute the thread https://github.com/notifications/unsubscribe/AMG3yqRJameYfMEdoywiRl6nHH6bro_iks5qNEZVgaJpZM4I1rv0 .

Met vriendelijke groeten, Louis Chaillet

[kennith]

I think this problem is resolved with #876.

[LeeLueken]

I think 1na and I are still having the problem. He pulled the changed branch from #876 and I made the changes by manually deleting the lines in question locally. I think there may be a good chance that we are both missing something like clearing the cache or something. I am a super noob, and don't even know how to pull branches yet. For now, I'm undoing my local hackery.

[LeeLueken]

I'm not sure what else I had been missing, but downloading the latest version of Web Starter Kit and overwriting everything fixed this issue for me. https://github.com/google/web-starter-kit/releases/tag/v0.6.4