Fix box sizing on examples

Using width:100% and padding without proper box-sizing causes elements to overflow on mobile, enabling overscroll-behavior in the X direction.
TimeoutY · Oct 12, 2018 · 1837a4e · 1837a4e
1 parent 6b6efde
commit 1837a4e
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/examples/misc_controls_deviceorientation.html b/examples/misc_controls_deviceorientation.html
@@ -20,6 +20,7 @@
 				font-size:13px;
 				font-weight: bold;
 				text-align:center;
+				box-sizing: border-box;
 			}
 
 			a {

diff --git a/examples/misc_controls_fly.html b/examples/misc_controls_fly.html
@@ -23,14 +23,17 @@
 				top: 0px; width: 100%;
 				padding: 5px;
 				z-index:100;
+				box-sizing: border-box;
 			}
 
 			a {
 
 				color: #0080ff;
 			}
 
-			b { color:orange }
+			b {
+				color:orange
+			}
 		</style>
 
 		<script src="../build/three.js"></script>

diff --git a/examples/misc_controls_map.html b/examples/misc_controls_map.html
@@ -22,7 +22,7 @@
 				position: absolute;
 				top: 0px; width: 100%;
 				padding: 5px;
-
+				box-sizing: border-box;
 			}
 
 			a {

diff --git a/examples/misc_controls_transform.html b/examples/misc_controls_transform.html
@@ -15,12 +15,15 @@
 				line-height: 30px;
 				overflow: hidden;
 			}
+
 			#info {
 				position: absolute;
 				top: 0px; width: 100%;
 				padding: 15px;
 				z-index:100;
+				box-sizing: border-box;
 			}
+
 			a {
 				color: white;
 			}