{"action":"created","issue":{"url":"https://api.github.com/repos/material-components/material-components-web/issues/2944","repository_url":"https://api.github.com/repos/material-components/material-components-web","labels_url":"https://api.github.com/repos/material-components/material-components-web/issues/2944/labels{/name}","comments_url":"https://api.github.com/repos/material-components/material-components-web/issues/2944/comments","events_url":"https://api.github.com/repos/material-components/material-components-web/issues/2944/events","html_url":"https://github.com/material-components/material-components-web/issues/2944","id":333051700,"node_id":"MDU6SXNzdWUzMzMwNTE3MDA=","number":2944,"title":"Top-App-Bar--Fixed: left and top margin (missing css properties)","user":{"login":"Deilv","id":1664998,"node_id":"MDQ6VXNlcjE2NjQ5OTg=","avatar_url":"https://avatars2.githubusercontent.com/u/1664998?v=4","gravatar_id":"","url":"https://api.github.com/users/Deilv","html_url":"https://github.com/Deilv","followers_url":"https://api.github.com/users/Deilv/followers","following_url":"https://api.github.com/users/Deilv/following{/other_user}","gists_url":"https://api.github.com/users/Deilv/gists{/gist_id}","starred_url":"https://api.github.com/users/Deilv/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Deilv/subscriptions","organizations_url":"https://api.github.com/users/Deilv/orgs","repos_url":"https://api.github.com/users/Deilv/repos","events_url":"https://api.github.com/users/Deilv/events{/privacy}","received_events_url":"https://api.github.com/users/Deilv/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":{"login":"williamernest","id":34519388,"node_id":"MDQ6VXNlcjM0NTE5Mzg4","avatar_url":"https://avatars3.githubusercontent.com/u/34519388?v=4","gravatar_id":"","url":"https://api.github.com/users/williamernest","html_url":"https://github.com/williamernest","followers_url":"https://api.github.com/users/williamernest/followers","following_url":"https://api.github.com/users/williamernest/following{/other_user}","gists_url":"https://api.github.com/users/williamernest/gists{/gist_id}","starred_url":"https://api.github.com/users/williamernest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/williamernest/subscriptions","organizations_url":"https://api.github.com/users/williamernest/orgs","repos_url":"https://api.github.com/users/williamernest/repos","events_url":"https://api.github.com/users/williamernest/events{/privacy}","received_events_url":"https://api.github.com/users/williamernest/received_events","type":"User","site_admin":false},"assignees":[{"login":"williamernest","id":34519388,"node_id":"MDQ6VXNlcjM0NTE5Mzg4","avatar_url":"https://avatars3.githubusercontent.com/u/34519388?v=4","gravatar_id":"","url":"https://api.github.com/users/williamernest","html_url":"https://github.com/williamernest","followers_url":"https://api.github.com/users/williamernest/followers","following_url":"https://api.github.com/users/williamernest/following{/other_user}","gists_url":"https://api.github.com/users/williamernest/gists{/gist_id}","starred_url":"https://api.github.com/users/williamernest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/williamernest/subscriptions","organizations_url":"https://api.github.com/users/williamernest/orgs","repos_url":"https://api.github.com/users/williamernest/repos","events_url":"https://api.github.com/users/williamernest/events{/privacy}","received_events_url":"https://api.github.com/users/williamernest/received_events","type":"User","site_admin":false}],"milestone":null,"comments":0,"created_at":"2018-06-17T10:17:55Z","updated_at":"2018-06-18T19:54:06Z","closed_at":"2018-06-18T19:54:06Z","author_association":"CONTRIBUTOR","body":"** PLEASE READ THIS BEFORE FILING AN ISSUE **\r\n\r\n### What MDC Web Version are you using?\r\n\r\n0.36.0\r\n\r\n### What browser(s) is this bug affecting?\r\n\r\nChrome 67.0.3396.87, Firefox 60.0.2.\r\n\r\n### What OS are you using?\r\n\r\nWindows 10\r\n\r\n### What are the steps to reproduce the bug?\r\n\r\nThe mdc-top-app-bar--fixed css class does not define left and top margins (while mdc-toolbar--fixed does) and as a result the fixed Top App Bar has an 8px top and left margin, which isn't the intended behavior. This is demostrated in the example below:\r\n\r\nhttps://codesandbox.io/s/71oqjl880j\r\n\r\n### What is the expected behavior?\r\n\r\nThe fixed Top App Bar should have 0 left, top and right margin to appear \"virtually fixed\" at the top of the window.\r\n\r\n### What is the actual behavior?\r\n\r\nThe fixed Top App Bar has an 8px top and left margin, like the non-fixed version.\r\n\r\n### Any other information you believe would be useful?\r\n\r\nThe problem is solved by adding the missing css properties to /top-app-bar/mdc-top-app-bar.scss and change\r\n```\r\n.mdc-top-app-bar--fixed {\r\n  transition: box-shadow 200ms linear;\r\n}\r\n```\r\nto:\r\n```\r\n.mdc-top-app-bar--fixed {\r\n  transition: box-shadow 200ms linear;\r\n  top: 0;\r\n  left: 0;\r\n}\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/material-components/material-components-web/issues/comments/398174921","html_url":"https://github.com/material-components/material-components-web/issues/2944#issuecomment-398174921","issue_url":"https://api.github.com/repos/material-components/material-components-web/issues/2944","id":398174921,"node_id":"MDEyOklzc3VlQ29tbWVudDM5ODE3NDkyMQ==","user":{"login":"williamernest","id":34519388,"node_id":"MDQ6VXNlcjM0NTE5Mzg4","avatar_url":"https://avatars3.githubusercontent.com/u/34519388?v=4","gravatar_id":"","url":"https://api.github.com/users/williamernest","html_url":"https://github.com/williamernest","followers_url":"https://api.github.com/users/williamernest/followers","following_url":"https://api.github.com/users/williamernest/following{/other_user}","gists_url":"https://api.github.com/users/williamernest/gists{/gist_id}","starred_url":"https://api.github.com/users/williamernest/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/williamernest/subscriptions","organizations_url":"https://api.github.com/users/williamernest/orgs","repos_url":"https://api.github.com/users/williamernest/repos","events_url":"https://api.github.com/users/williamernest/events{/privacy}","received_events_url":"https://api.github.com/users/williamernest/received_events","type":"User","site_admin":false},"created_at":"2018-06-18T19:54:06Z","updated_at":"2018-06-18T19:54:06Z","author_association":"CONTRIBUTOR","body":"@Deilv Thanks for filing this issue. Some browsers have implemented a margin on the `body` element which causes this. You can set the styles on the `body` tag or use something like `normalize.css` to fix this issue. \r\n\r\nAdding `left` or `right` to the `mdc-top-app-bar` or `mdc-top-app-bar--fixed` classes will break compatibility with some of the drawer variants, since the top app bar should not be displayed on top of the drawer header. "}}
{"actor":{"display_login":"williamernest"}}