{"action":"created","issue":{"url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/94","repository_url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar","labels_url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/94/labels{/name}","comments_url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/94/comments","events_url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/94/events","html_url":"https://github.com/zefoy/ngx-perfect-scrollbar/issues/94","id":265002722,"number":94,"title":"display:flex on fxFlex attribute ?","user":{"login":"sambaptista","id":5111137,"avatar_url":"https://avatars0.githubusercontent.com/u/5111137?v=4","gravatar_id":"","url":"https://api.github.com/users/sambaptista","html_url":"https://github.com/sambaptista","followers_url":"https://api.github.com/users/sambaptista/followers","following_url":"https://api.github.com/users/sambaptista/following{/other_user}","gists_url":"https://api.github.com/users/sambaptista/gists{/gist_id}","starred_url":"https://api.github.com/users/sambaptista/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sambaptista/subscriptions","organizations_url":"https://api.github.com/users/sambaptista/orgs","repos_url":"https://api.github.com/users/sambaptista/repos","events_url":"https://api.github.com/users/sambaptista/events{/privacy}","received_events_url":"https://api.github.com/users/sambaptista/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":5,"created_at":"2017-10-12T16:17:43Z","updated_at":"2017-10-13T06:22:24Z","closed_at":null,"author_association":"NONE","body":"Hello, \r\n\r\nI'm implementing your lib, but noticed something strange : when switching from a `<div fxFlex>` to a `<perfect-scrollbar fxFlex>` I got a new css instruction `display:flex` applied to my element.\r\n\r\nCorrect me if I'm wrong, but fxFlex is supposed to add `flex:1 1 auto` on child elements of a container with `display:flex`\r\n\r\nThe `display:flex` style is defined by `fxLayout` attribute that is destinated to containers and should not be applied by `fxFlex` attribute.\r\n\r\nActually, when styling a` <perfect-scrollbar>` as a child element, we apply container styles (and in my case, it breaks the layout).\r\n\r\n<img width=\"366\" alt=\"capture d ecran 2017-10-12 17 41 29\" src=\"https://user-images.githubusercontent.com/5111137/31505299-e52f5c18-af74-11e7-85ce-4d364c2f424e.png\">\r\n\r\nImho, the `display:flex` instruction should not be there, mostly if there is no flex-direction specified.\r\n"},"comment":{"url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/comments/336361445","html_url":"https://github.com/zefoy/ngx-perfect-scrollbar/issues/94#issuecomment-336361445","issue_url":"https://api.github.com/repos/zefoy/ngx-perfect-scrollbar/issues/94","id":336361445,"user":{"login":"sconix","id":921515,"avatar_url":"https://avatars3.githubusercontent.com/u/921515?v=4","gravatar_id":"","url":"https://api.github.com/users/sconix","html_url":"https://github.com/sconix","followers_url":"https://api.github.com/users/sconix/followers","following_url":"https://api.github.com/users/sconix/following{/other_user}","gists_url":"https://api.github.com/users/sconix/gists{/gist_id}","starred_url":"https://api.github.com/users/sconix/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sconix/subscriptions","organizations_url":"https://api.github.com/users/sconix/orgs","repos_url":"https://api.github.com/users/sconix/repos","events_url":"https://api.github.com/users/sconix/events{/privacy}","received_events_url":"https://api.github.com/users/sconix/received_events","type":"User","site_admin":false},"created_at":"2017-10-13T06:22:24Z","updated_at":"2017-10-13T06:22:24Z","author_association":"CONTRIBUTOR","body":"I am thinking that this would be the \"correct\" style configuration:\r\n\r\n`\r\n  &[fxflex] {\r\n    display: flex;\r\n    flex-direction: column;\r\n    -webkit-box-orient: column;\r\n    -webkit-box-direction: column;\r\n    height: auto;\r\n    min-width: 0;\r\n    min-height: 0;\r\n\r\n    & > .ps {\r\n      flex: 1 1 auto;\r\n      -ms-flex: 1 1 auto;\r\n      -webkit-box-flex: 1;\r\n      width: auto;\r\n      height: auto;\r\n      min-width: 0;\r\n      min-height: 0;\r\n    }\r\n  }\r\n\r\n  &[fxlayout] {\r\n    & > .ps,\r\n    & > .ps > .ps-content {\r\n      display: flex;\r\n      flex: 1 1 auto;\r\n      -ms-flex: 1 1 auto;\r\n      -webkit-box-flex: 1;\r\n      flex-direction: inherit;\r\n      -webkit-box-orient: inherit;\r\n      -webkit-box-direction: inherit;\r\n      width: auto;\r\n      height: auto;\r\n      min-width: 0;\r\n      min-height: 0;\r\n    }\r\n  }\r\n`\r\n\r\nSo if the component has fxFlex then we use flex to style the ps container and if fxFlexLayout is used then we inherit the setup to the ps content so that contents can be layouted with flex. Initial testing shows this working, but there is one issue. For some reason the ps-content element gets row direction from the flex-layout, but I think this is a flex-layout bug. At least there has been issue about adding row incorrectly. Will study this bit more."}}
{"actor":{"display_login":"sconix"}}