{"action":"closed","issue":{"url":"https://api.github.com/repos/PolymerElements/paper-dialog/issues/54","labels_url":"https://api.github.com/repos/PolymerElements/paper-dialog/issues/54/labels{/name}","comments_url":"https://api.github.com/repos/PolymerElements/paper-dialog/issues/54/comments","events_url":"https://api.github.com/repos/PolymerElements/paper-dialog/issues/54/events","html_url":"https://github.com/PolymerElements/paper-dialog/issues/54","id":114019807,"number":54,"title":"sizing issue with custom style","user":{"login":"MorganWu","id":1981522,"avatar_url":"https://avatars.githubusercontent.com/u/1981522?v=3","gravatar_id":"","url":"https://api.github.com/users/MorganWu","html_url":"https://github.com/MorganWu","followers_url":"https://api.github.com/users/MorganWu/followers","following_url":"https://api.github.com/users/MorganWu/following{/other_user}","gists_url":"https://api.github.com/users/MorganWu/gists{/gist_id}","starred_url":"https://api.github.com/users/MorganWu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/MorganWu/subscriptions","organizations_url":"https://api.github.com/users/MorganWu/orgs","repos_url":"https://api.github.com/users/MorganWu/repos","events_url":"https://api.github.com/users/MorganWu/events{/privacy}","received_events_url":"https://api.github.com/users/MorganWu/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-10-29T10:22:45Z","updated_at":"2015-12-08T22:07:18Z","closed_at":"2015-12-08T22:07:18Z","body":"I'm trying to define a custom pop up window to make it responsive for different viewports, based on paper-dialog-behavior. I want it to take full size of screen in mobile screen, just like a new full screen view in native apps to be pushed into, and have a limited size in pc screen. I used paper-dialog for testing, but found the styles are not applied correctly and the dialog is not kept centered when the window is being resized. Maybe I misused styles, please enlighten me if anyone have any idea. Following is my test code, I described the expecting behaviours and the testing results inside. Thanks.\r\n\r\n```html\r\n<!doctype html>\r\n<html lang=\"\">\r\n<head>\r\n    <meta charset=\"utf-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n    <meta name=\"mobile-web-app-capable\" content=\"yes\">\r\n    <script src=\"../bower_components/webcomponentsjs/webcomponents-lite.js\"></script>\r\n    <link rel=\"import\" href=\"../bower_components/paper-dialog/paper-dialog.html\">\r\n    <link rel=\"import\" href=\"../bower_components/paper-button/paper-button.html\">\r\n    <link rel=\"import\" href=\"../bower_components/iron-icons/iron-icons.html\">\r\n    <link rel=\"import\" href=\"../bower_components/iron-icon/iron-icon.html\">\r\n    <style is=\"custom-style\">\r\n        paper-dialog {\r\n            background: var(--paper-indigo-a200);\r\n            color: #FFFFFF;\r\n        }\r\n\r\n        @media (max-width: 600px) {\r\n            paper-dialog {\r\n                position: absolute;\r\n                top: 0;\r\n                right: 0;\r\n                bottom: 0;\r\n                left: 0;\r\n                margin: 0;\r\n            }\r\n        }\r\n\r\n        @media (min-width: 601px) {\r\n            paper-dialog {\r\n                width: calc(100% - 20px);\r\n                max-width: 800px;\r\n                height: calc(100% - 20px);\r\n                max-height: 800px;\r\n            }\r\n        }\r\n\r\n        iron-icon {\r\n            display: inline-block;\r\n        }\r\n\r\n        ul {\r\n            list-style-type: none;\r\n            padding-left: 0;\r\n        }\r\n\r\n        li {\r\n            margin-left: 0;\r\n        }\r\n    </style>\r\n</head>\r\n\r\n<body unresolved class=\"fullbleed layout vertical\">\r\n<span id=\"browser-sync-binding\"></span>\r\n<paper-button style=\"position: fixed; right: 40px; bottom: 40px;\" onclick=\"clickHandler()\">open dialog</paper-button>\r\n<paper-dialog id=\"dialog\" entry-animation=\"scale-up-animation\" exit-animation=\"fade-out-animation\">\r\n    <section>\r\n        <!--<h4>Please try to resize window from pc size and mobile size, and check the results.</h4>-->\r\n        <span>Expecting behaviors and test results:</span>\r\n\r\n        <h4>Dialog take the full size of screen in mobile mode (max-width <= 600px)</h4>\r\n        <ul>\r\n            <li>\r\n                <iron-icon icon=\"icons:check\"></iron-icon>\r\n                Case 1, start from mobile size.\r\n            </li>\r\n            <li>\r\n                <iron-icon icon=\"icons:clear\"></iron-icon>\r\n                Case 2, start from pc size, resize to mobile size.\r\n            </li>\r\n        </ul>\r\n\r\n        <h4>Dialog will be centered all time window is being resized, respecting max-height and max-width style</h4>\r\n        <ul>\r\n            <li>\r\n                <iron-icon icon=\"icons:clear\"></iron-icon>\r\n                Case 1, start from pc size, resize to mobile size, and back to pc size.\r\n            </li>\r\n            <li>\r\n                <iron-icon icon=\"icons:clear\"></iron-icon>\r\n                Case 2, start from mobile size, resize to pc size.\r\n            </li>\r\n            <li>\r\n                <iron-icon icon=\"icons:clear\"></iron-icon>\r\n                Case 3, open dialog, dismiss it, and open again.\r\n            </li>\r\n        </ul>\r\n\r\n    </section>\r\n</paper-dialog>\r\n\r\n<script type=\"application/javascript\">\r\n    function clickHandler() {\r\n        document.querySelector('paper-dialog').open();\r\n    }\r\n</script>\r\n</body>\r\n\r\n</html>\r\n\r\n```"}}