From 0e02a4c7cae31d0051f1095f9053612f42f24260 Mon Sep 17 00:00:00 2001
From: Justin Richer <jricher@mit.edu>
Date: Thu, 26 Jun 2014 11:27:44 -0400
Subject: [PATCH] fixed wonky CSS on login page ... again

(backport from MIT)
---
 .../src/main/webapp/WEB-INF/views/login.jsp   | 36 +++++++++++++------
 .../webapp/resources/css/mitreid-connect.css  | 35 ++++++++++++++++--
 2 files changed, 58 insertions(+), 13 deletions(-)

diff --git a/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/login.jsp b/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/login.jsp
index b60079825..6588affb7 100644
--- a/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/login.jsp
+++ b/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/login.jsp
@@ -12,24 +12,38 @@ $(document).ready(function() {
 //-->
 </script>
 <o:topbar />
-<div class="container main">
+<div class="container-fluid main">
 
 	<h1>Login with Username and Password</h1>
 
 	<c:if test="${ param.error != null }">
-		<div class="alert alert-error">The system was unable to log you in. Please try again.</div>
+		<div class="alert alert-error">The system was unable to log you
+			in. Please try again.</div>
 	</c:if>
 
 
-<div class="row-fluid">
-   <form action="<%=request.getContextPath()%>/j_spring_security_check" method="POST">
-      <div class="span4 offset1 well">
-         <div class="input-prepend"><span class="add-on"><i class="icon-user"></i></span><input type="text" placeholder="Username" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" value="" id="j_username" name="j_username" class="span11"></div>
-         <div class="input-prepend"><span class="add-on"><i class="icon-lock"></i></span><input type="password" placeholder="Password" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" id="j_password" name="j_password" class="span11"></div>
-         <div class="form-actions"><input type="submit" class="btn" value="Login" name="submit"></div>
-      </div>
-   </form>
+	<div class="row-fluid">
+		<div class="span4 offset1 well">
+			<form action="<%=request.getContextPath()%>/j_spring_security_check"
+				method="POST">
+				<div>
+					<div class="input-prepend input-block-level">
+						<span class="add-on"><i class="icon-user"></i></span>
+						<input type="text" placeholder="Username" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" value="" id="j_username" name="j_username">
+					</div>
+				</div>
+				<div>
+					<div class="input-prepend input-block-level">
+						<span class="add-on"><i class="icon-lock"></i></span>
+						<input type="password" placeholder="Password" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" id="j_password" name="j_password">
+					</div>
+				</div>
+				<div class="form-actions">
+					<input type="submit" class="btn" value="Login" name="submit">
+				</div>
+			</form>
+		</div>
+	</div>
 </div>
 
-</div>
 <o:footer/>
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/css/mitreid-connect.css b/openid-connect-server-webapp/src/main/webapp/resources/css/mitreid-connect.css
index 4a642a2e5..dce867df6 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/css/mitreid-connect.css
+++ b/openid-connect-server-webapp/src/main/webapp/resources/css/mitreid-connect.css
@@ -30,7 +30,7 @@ h1,label {
 	min-height: 100%;
 	height: auto !important;
 	height: 100%;
-	/* Negative indent footer by it's height */
+	/* Negative indent footer by its height */
 	margin: 0 auto -60px;
 }
 
@@ -53,4 +53,35 @@ h1,label {
 
 .inputError {
 	border: 1px solid #b94a48 !important;
-}
\ No newline at end of file
+}
+
+/* Fix for wonky forms */
+
+.input-append.input-block-level,
+.input-prepend.input-block-level {
+  display: table;
+}
+
+.input-append.input-block-level .add-on,
+.input-prepend.input-block-level .add-on {
+  display: table-cell;
+  width: 1%; /* remove this if you want default bootstrap button width */
+}
+
+.input-append.input-block-level > input,
+.input-prepend.input-block-level > input {
+  box-sizing: border-box; /* use bootstrap mixin or include vendor variants */
+  -moz-box-sizing: border-box; /* for Firefox */
+  display: table; /* table-cell is not working well in Chrome for small widths */
+  min-height: inherit;
+  width: 100%;
+}
+
+.input-append.input-block-level > input {
+  border-right: 0;
+}
+
+.input-prepend.input-block-level > input {
+  border-left: 0;
+}
+