fix(dialog): Center dialog on screen in all supported browsers (#413) (…

…#415)
material-components · Mar 22, 2017 · c67a12f · c67a12f
1 parent 88f523e
commit c67a12f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 12 deletions.
diff --git a/demos/dialog.html b/demos/dialog.html
@@ -38,7 +38,7 @@
       }
     </style>
   </head>
-  <body class="mdc-typography"> 
+  <body class="mdc-typography">
     <div class="demo-body">
     	<aside id="mdc-dialog-default"
     	  class="mdc-dialog"
@@ -88,14 +88,14 @@ <h2 id="mdc-dialog-with-list-label" class="mdc-dialog__header__title">
               <li class="mdc-list-item">Luna</li>
               <li class="mdc-list-item">Marimba</li>
               <li class="mdc-list-item">Schwifty</li>
-            </ul> 
+            </ul>
     	    </section>
     	    <footer class="mdc-dialog__footer">
     	      <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel">Decline</button>
     	      <button type="button" class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept">Accept</button>
     	    </footer>
     	  </div>
-    	  <div class="mdc-dialog__backdrop"></div> 
+    	  <div class="mdc-dialog__backdrop"></div>
     	</aside>
   	</div>
     <section class="demo-content">
@@ -155,15 +155,15 @@ <h2>MDC Web Dialog</h2>
       (function() {
 
         var dialog = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-default'));
-        
-        dialog.listen('MDCDialog:accept', () => {
+
+        dialog.listen('MDCDialog:accept', function() {
           console.log('accepted');
         });
-        
-        dialog.listen('MDCDialog:cancel', () => {
+
+        dialog.listen('MDCDialog:cancel', function() {
           console.log('canceled');
         });
-        
+
         document.querySelector('#default-dialog-activation').addEventListener('click', function (evt) {
           dialog.lastFocusedTarget = evt.target;
           dialog.show();

diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
@@ -151,11 +151,11 @@ const dialog = new MDCDialog(document.querySelector('#my-mdc-dialog'));
 ```js
 var dialog = new mdc.dialog.MDCDialog(document.querySelector('#mdc-dialog-default'));
 
-dialog.listen('MDCDialog:accept', () => {
+dialog.listen('MDCDialog:accept', function() {
   console.log('accepted');
 })
 
-dialog.listen('MDCDialog:cancel', () => {
+dialog.listen('MDCDialog:cancel', function() {
   console.log('canceled');
 })
 

diff --git a/packages/mdc-dialog/mdc-dialog.scss b/packages/mdc-dialog/mdc-dialog.scss
@@ -37,8 +37,6 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
 
   &__surface {
     display: inline-flex;
-    position: absolute;
-    bottom: 50vh;
     flex-direction: column;
 
     @include mdc-elevation(24);
@@ -48,6 +46,7 @@ $mdc-dialog-dark-theme-bg-color: #303030 !default;
     max-width: 865px;
     transform: translateY(150px) scale(.8);
     transition: mdc-animation-enter(opacity, 120ms), mdc-animation-enter(transform, 120ms);
+    border-radius: 2px;
 
     @include mdc-theme-prop(background-color, background);