fixed wonky CSS on login page ... again

(backport from MIT)
pull/627/head
Justin Richer 2014-06-26 11:27:44 -04:00
parent d35f1fa014
commit 0e02a4c7ca
2 changed files with 58 additions and 13 deletions

View File

@ -12,24 +12,38 @@ $(document).ready(function() {
//--> //-->
</script> </script>
<o:topbar /> <o:topbar />
<div class="container main"> <div class="container-fluid main">
<h1>Login with Username and Password</h1> <h1>Login with Username and Password</h1>
<c:if test="${ param.error != null }"> <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> </c:if>
<div class="row-fluid"> <div class="row-fluid">
<form action="<%=request.getContextPath()%>/j_spring_security_check" method="POST"> <div class="span4 offset1 well">
<div class="span4 offset1 well"> <form action="<%=request.getContextPath()%>/j_spring_security_check"
<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> method="POST">
<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>
<div class="form-actions"><input type="submit" class="btn" value="Login" name="submit"></div> <div class="input-prepend input-block-level">
</div> <span class="add-on"><i class="icon-user"></i></span>
</form> <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>
</div>
<o:footer/> <o:footer/>

View File

@ -30,7 +30,7 @@ h1,label {
min-height: 100%; min-height: 100%;
height: auto !important; height: auto !important;
height: 100%; height: 100%;
/* Negative indent footer by it's height */ /* Negative indent footer by its height */
margin: 0 auto -60px; margin: 0 auto -60px;
} }
@ -54,3 +54,34 @@ h1,label {
.inputError { .inputError {
border: 1px solid #b94a48 !important; border: 1px solid #b94a48 !important;
} }
/* 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;
}