Fix example button position (#3593)

maplibre · Jan 18, 2024 · 45d250c · 45d250c
1 parent bb219f0
commit 45d250c
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 20 deletions.
diff --git a/test/examples/animate-a-line.html b/test/examples/animate-a-line.html
@@ -16,6 +16,7 @@
 <style>
     button {
         position: absolute;
+        top: 0;
         margin: 20px;
     }
 
@@ -131,4 +132,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/change-building-color-based-on-zoom-level.html b/test/examples/change-building-color-based-on-zoom-level.html
@@ -16,8 +16,10 @@
 <style>
     #zoom {
         display: block;
-        position: relative;
-        margin: 20px auto;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
         width: 50%;
         height: 40px;
         padding: 10px;
@@ -67,4 +69,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/fitbounds.html b/test/examples/fitbounds.html
@@ -16,8 +16,10 @@
 <style>
     #fit {
         display: block;
-        position: relative;
-        margin: 0px auto;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
         width: 50%;
         height: 40px;
         padding: 10px;
@@ -49,4 +51,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/flyto-options.html b/test/examples/flyto-options.html
@@ -16,8 +16,10 @@
 <style>
     #fly {
         display: block;
-        position: relative;
-        margin: 0px auto;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
         width: 50%;
         height: 40px;
         padding: 10px;
@@ -78,4 +80,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/flyto.html b/test/examples/flyto.html
@@ -16,8 +16,10 @@
 <style>
     #fly {
         display: block;
-        position: relative;
-        margin: 0px auto;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
         width: 50%;
         height: 40px;
         padding: 10px;
@@ -54,4 +56,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/language-switch.html b/test/examples/language-switch.html
@@ -15,12 +15,14 @@
 <body>
 <style>
     #buttons {
+        display: flex;
+        justify-content: space-between;
+        position: absolute;
+        top: 20px;
         width: 90%;
-        margin: 0 auto;
     }
     .button {
         display: inline-block;
-        position: relative;
         cursor: pointer;
         width: 20%;
         padding: 8px;
@@ -64,4 +66,4 @@
         });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/mouse-position.html b/test/examples/mouse-position.html
@@ -16,8 +16,10 @@
 <style type="text/css">
     #info {
         display: block;
-        position: relative;
-        margin: 0px auto;
+        position: absolute;
+        top: 20px;
+        left: 50%;
+        transform: translate(-50%);
         width: 50%;
         padding: 10px;
         border: none;
@@ -50,4 +52,4 @@
     });
 </script>
 </body>
-</html>
+</html>
diff --git a/test/examples/render-world-copies.html b/test/examples/render-world-copies.html
@@ -16,6 +16,8 @@
 <style>
     #menu {
         position: absolute;
+        top: 0;
+        left: 0;
         background: #fff;
         padding: 10px;
         font-family: 'Open Sans', sans-serif;
@@ -57,4 +59,4 @@
     }
 </script>
 </body>
-</html>
+</html>