search

googlecodelabs / codelab-components

Web components for creating codelabs
https://googlecodelabs.github.io/codelab-components/
Apache License 2.0
472 stars 97 forks source link

codelab previous step FAB not positioned correctly in narrow mode #22

Closed baabel closed 8 years ago

baabel commented 8 years ago

Looks like the footer element needs to be a child of 'main' when in narrow mode.

I took at look at production google codelab components and it appears they implemented the drawer panel using iron-media-query and iron-selector and additional div wrappers. Any plans to merge those changes into this project?

image

Thanks.

ebidel commented 8 years ago

I think the github page just needs updating.

ebidel commented 8 years ago

Hmm, this style should be applying: https://github.com/googlecodelabs/codelab-components/blob/1d528043b1d886df665881224898ef69ffc4f7ba/codelab-style.html#L52-L54 but for some reason it's not.

ebidel commented 8 years ago

Can you do me a favor, and remove strip-whitespace here and see if that fixes it?

baabel commented 8 years ago

I removed the strip-whitespace and see the same behavior.

drawer[narrow] #controls {

width: 100%; }

I believe that the above style is not applying because it is a descendent selector and the footer tag (with id=controls) is not a child of the drawer panel (id=drawer)

ebidel commented 8 years ago

Right you are!