{"action":"closed","issue":{"url":"https://api.github.com/repos/angular/flex-layout/issues/263","repository_url":"https://api.github.com/repos/angular/flex-layout","labels_url":"https://api.github.com/repos/angular/flex-layout/issues/263/labels{/name}","comments_url":"https://api.github.com/repos/angular/flex-layout/issues/263/comments","events_url":"https://api.github.com/repos/angular/flex-layout/issues/263/events","html_url":"https://github.com/angular/flex-layout/issues/263","id":223484194,"number":263,"title":"fxFlex directive adding styles to both parent and host element","user":{"login":"rosslavery","id":656884,"avatar_url":"https://avatars2.githubusercontent.com/u/656884?v=4","gravatar_id":"","url":"https://api.github.com/users/rosslavery","html_url":"https://github.com/rosslavery","followers_url":"https://api.github.com/users/rosslavery/followers","following_url":"https://api.github.com/users/rosslavery/following{/other_user}","gists_url":"https://api.github.com/users/rosslavery/gists{/gist_id}","starred_url":"https://api.github.com/users/rosslavery/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rosslavery/subscriptions","organizations_url":"https://api.github.com/users/rosslavery/orgs","repos_url":"https://api.github.com/users/rosslavery/repos","events_url":"https://api.github.com/users/rosslavery/events{/privacy}","received_events_url":"https://api.github.com/users/rosslavery/received_events","type":"User","site_admin":false},"labels":[{"id":528387983,"url":"https://api.github.com/repos/angular/flex-layout/labels/P2:%20required","name":"P2: required","color":"e99695","default":false},{"id":506085435,"url":"https://api.github.com/repos/angular/flex-layout/labels/has%20pr","name":"has pr","color":"0e8a16","default":false}],"state":"closed","locked":false,"assignee":{"login":"CaerusKaru","id":416563,"avatar_url":"https://avatars3.githubusercontent.com/u/416563?v=4","gravatar_id":"","url":"https://api.github.com/users/CaerusKaru","html_url":"https://github.com/CaerusKaru","followers_url":"https://api.github.com/users/CaerusKaru/followers","following_url":"https://api.github.com/users/CaerusKaru/following{/other_user}","gists_url":"https://api.github.com/users/CaerusKaru/gists{/gist_id}","starred_url":"https://api.github.com/users/CaerusKaru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CaerusKaru/subscriptions","organizations_url":"https://api.github.com/users/CaerusKaru/orgs","repos_url":"https://api.github.com/users/CaerusKaru/repos","events_url":"https://api.github.com/users/CaerusKaru/events{/privacy}","received_events_url":"https://api.github.com/users/CaerusKaru/received_events","type":"User","site_admin":false},"assignees":[{"login":"CaerusKaru","id":416563,"avatar_url":"https://avatars3.githubusercontent.com/u/416563?v=4","gravatar_id":"","url":"https://api.github.com/users/CaerusKaru","html_url":"https://github.com/CaerusKaru","followers_url":"https://api.github.com/users/CaerusKaru/followers","following_url":"https://api.github.com/users/CaerusKaru/following{/other_user}","gists_url":"https://api.github.com/users/CaerusKaru/gists{/gist_id}","starred_url":"https://api.github.com/users/CaerusKaru/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/CaerusKaru/subscriptions","organizations_url":"https://api.github.com/users/CaerusKaru/orgs","repos_url":"https://api.github.com/users/CaerusKaru/repos","events_url":"https://api.github.com/users/CaerusKaru/events{/privacy}","received_events_url":"https://api.github.com/users/CaerusKaru/received_events","type":"User","site_admin":false}],"milestone":{"url":"https://api.github.com/repos/angular/flex-layout/milestones/14","html_url":"https://github.com/angular/flex-layout/milestone/14","labels_url":"https://api.github.com/repos/angular/flex-layout/milestones/14/labels","id":2753202,"number":14,"title":"v6.0.0-beta.14","description":"Fixes for fxFlex injections of max-width + flex-basis; upgrade to Angular v6","creator":{"login":"ThomasBurleson","id":210413,"avatar_url":"https://avatars3.githubusercontent.com/u/210413?v=4","gravatar_id":"","url":"https://api.github.com/users/ThomasBurleson","html_url":"https://github.com/ThomasBurleson","followers_url":"https://api.github.com/users/ThomasBurleson/followers","following_url":"https://api.github.com/users/ThomasBurleson/following{/other_user}","gists_url":"https://api.github.com/users/ThomasBurleson/gists{/gist_id}","starred_url":"https://api.github.com/users/ThomasBurleson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ThomasBurleson/subscriptions","organizations_url":"https://api.github.com/users/ThomasBurleson/orgs","repos_url":"https://api.github.com/users/ThomasBurleson/repos","events_url":"https://api.github.com/users/ThomasBurleson/events{/privacy}","received_events_url":"https://api.github.com/users/ThomasBurleson/received_events","type":"User","site_admin":false},"open_issues":20,"closed_issues":48,"state":"open","created_at":"2017-09-08T15:10:13Z","updated_at":"2018-03-19T16:51:06Z","due_on":"2018-04-05T07:00:00Z","closed_at":null},"comments":8,"created_at":"2017-04-21T20:12:30Z","updated_at":"2018-03-19T16:51:06Z","closed_at":"2018-03-19T16:51:06Z","author_association":"NONE","body":"When `fxFlex` is added to a child element whose parent does not contain `fxLayout`, the library is automatically adding inline styles to the parent element (as well as the host) that essentially convert the parent to a flex row.\r\n\r\nWhile I understand the documentation states:\r\n\r\n> The fxFlex directive should be used on elements within a fxLayout container and identifies the resizing of that element within the flexbox container flow.\r\n\r\nThere are valid use-cases that require the use of fxFlex to be used while not inside an `fxLayout` container, and the expected result would be a simply application of `flex: 1 1 auto` or whatever the desired style is on the **host** element, while leaving the **parent** element alone.\r\n\r\nOne such example would be a routing component that needs to be a flex column. Currently, I have styles in my component stylesheet that set it to be a flex column on the `:host`. Then the child elements inside the component template use `fxFlex` to stretch to fill that container. Unfortunately `flex-layout` is currently converting those routed components to be a flex **row** with inline styles that clobber the component stylesheet.\r\n\r\nThe desired behaviour would therefore be to leave the parent component of the host untouched.\r\n\r\nOriginally posted here: https://github.com/angular/angular/issues/15726"}}
{"actor":{"display_login":"ThomasBurleson"}}