IE11 centering

RallySoftware · Dec 4, 2018 · 554fd0e · 554fd0e
1 parent a696faf
commit 554fd0e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/mujina-sp/src/main/resources/public/main.css b/mujina-sp/src/main/resources/public/main.css
@@ -1,12 +1,18 @@
 ul {
     list-style: none;
 }
-
+.login-container-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
 .login-container, .user-container {
     font-family: Helvetica, Verdana, serif;
     display: flex;
     align-items: center;
     justify-content: center;
+    flex-direction: column;
+    min-height: 100%;
     width: 100%;
     background: linear-gradient(135deg, #fff 0%, #f3f6f8 100%);
 }
@@ -35,7 +41,9 @@ ul {
     justify-content: center;
     flex-direction: column;
     align-self: center;
-    margin: auto;
+    margin: auto auto 20%;
+    box-sizing: border-box;
+    max-width: 100%;
 }
 h1 {
     font-size: 24px;

diff --git a/mujina-sp/src/main/resources/templates/index.html b/mujina-sp/src/main/resources/templates/index.html
@@ -6,16 +6,18 @@
     <script th:src="@{/sp.js}"></script>
 </head>
 <body>
-<section class="login-container">
-    <section class="login">
-        <h1>Mujina Service Provider</h1>
-        <a id="user-link" class="button" th:href="@{/user.html?force-authn=false}">Login</a>
-        <section class="force-authn">
-            <input type="checkbox" id="force-authn" name="force-authn"/>
-            <label for="force-authn">Force Authn request?</label>
+<section class="login-container-wrapper">
+    <section class="login-container">
+        <section class="login">
+            <h1>Mujina Service Provider</h1>
+            <a id="user-link" class="button" th:href="@{/user.html?force-authn=false}">Login</a>
+            <section class="force-authn">
+                <input type="checkbox" id="force-authn" name="force-authn"/>
+                <label for="force-authn">Force Authn request?</label>
+            </section>
         </section>
+        <a class="powered-by" href="https://openconext.org/" target="_blank">Copyright © 2018 OpenConext</a>
     </section>
-    <a class="powered-by" href="https://openconext.org/" target="_blank">Copyright © 2018 OpenConext</a>
 </section>
 </body>
 </html>