Changed dialog to use absolute positioning; made dialogs fullscreen o…

…n mobile
arodenbeck · Apr 21, 2017 · fc666fe · fc666fe
1 parent faad012
commit fc666fe
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/examples/dialog-modal/css/dialog.css b/examples/dialog-modal/css/dialog.css
@@ -45,7 +45,7 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na
 }
 
 #dialog_layer.showing {
-	position: fixed;
+	position: absolute;
 	width: 100%;
 	height: 100%;
 	top: 0;
@@ -68,6 +68,15 @@ div.default_dialog {
 	left: 25%;
 }
 
+@media screen and (max-width: 640px) {
+	div.default_dialog {
+		box-sizing: border-box;
+		top: 1%;
+		left: 2%;
+		width: 96%;
+	}
+}
+
 .default_dialog h2:first-of-type {
 	text-align:center;
 }

diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html
@@ -4,6 +4,8 @@
 <meta charset="utf-8" />
 <title>Modal Dialog Example | WAI-ARIA Authoring Practices 1.1</title>
 
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
 <!--  Core js and css shared by all examples; do not modify when using this template. -->
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
 <link href="../css/core.css" rel="stylesheet">