{"action":"closed","issue":{"url":"https://api.github.com/repos/angular/material/issues/9550","repository_url":"https://api.github.com/repos/angular/material","labels_url":"https://api.github.com/repos/angular/material/issues/9550/labels{/name}","comments_url":"https://api.github.com/repos/angular/material/issues/9550/comments","events_url":"https://api.github.com/repos/angular/material/issues/9550/events","html_url":"https://github.com/angular/material/issues/9550","id":175722400,"number":9550,"title":"md-datepicker full-width flex issue","user":{"login":"sivakrrish1994","id":16810263,"avatar_url":"https://avatars.githubusercontent.com/u/16810263?v=3","gravatar_id":"","url":"https://api.github.com/users/sivakrrish1994","html_url":"https://github.com/sivakrrish1994","followers_url":"https://api.github.com/users/sivakrrish1994/followers","following_url":"https://api.github.com/users/sivakrrish1994/following{/other_user}","gists_url":"https://api.github.com/users/sivakrrish1994/gists{/gist_id}","starred_url":"https://api.github.com/users/sivakrrish1994/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sivakrrish1994/subscriptions","organizations_url":"https://api.github.com/users/sivakrrish1994/orgs","repos_url":"https://api.github.com/users/sivakrrish1994/repos","events_url":"https://api.github.com/users/sivakrrish1994/events{/privacy}","received_events_url":"https://api.github.com/users/sivakrrish1994/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2016-09-08T10:46:45Z","updated_at":"2016-09-08T10:54:13Z","closed_at":"2016-09-08T10:54:13Z","body":"**Actual Behavior**:\r\n`md-datepicker full-width flex issue *`\r\n`The input field should be flexed accordingly to the layout given but it doesn't seems to work. The input field Hence I rewrote CSS styling.`\r\n\r\nThis is the angular material md-datepicker\r\n\r\n    <md-input-container flex>\r\n    <label>DOB</label>\r\n    <md-datepicker ng-model=\"model.dob\" name=\"dob\"></md-datepicker>\r\n    <div role=\"alert\" ng-messages=\"form_name.dob.$error\">\r\n    <div ng-message=\"required\">Date Of Birth is required.</div>\r\n    </div>\r\n    </md-input-container>\r\n\r\nSo, just include this class in your md-input-container to fix them,\r\n\r\n     .date-picker {\r\n        padding-right : 18px;\r\n        height        : 58px !important;\r\n        margin-top    : 8px !important;\r\n\r\n        label {\r\n            left  : 33px !important;\r\n            right : 0 !important;\r\n            width : calc(100% - 33px) !important;\r\n        }\r\n\r\n        md-datepicker {\r\n            display     : inline-block;\r\n            width       : 100%;\r\n            margin-left : 26px;\r\n            height      : 0;\r\n\r\n            .md-datepicker-button {\r\n                float       : left;\r\n                margin-top  : -12.5px;\r\n                margin-left : -33px;\r\n            }\r\n\r\n            .md-datepicker-input-container {\r\n                width : 100%;\r\n                top   : -14px;\r\n                right : 17px;\r\n\r\n                .md-datepicker-input {\r\n                    max-width : 100% !important;\r\n                    min-width : 100% !important;\r\n                }\r\n\r\n                .md-datepicker-expand-triangle {\r\n                    border-left  : 4px solid transparent;\r\n                    border-right : 4px solid transparent;\r\n                    border-top   : 4px solid;\r\n                }\r\n            }\r\n        }\r\n\r\n        .md-input-messages-animation {\r\n            .md-input-message-animation {\r\n                opacity     : 1;\r\n                margin-top  : 6px !important;\r\n                margin-left : 34px !important;\r\n            }\r\n        }\r\n    }\r\n\r\n**Angular Versions**: *\r\n -  `Angular Version: ^1.4.8`\r\n -  `Angular Material Version: 1.1.1`"}}
{"actor":{"display_login":"crisbeto"}}