Commit 0b419849 authored by Mark Otto's avatar Mark Otto
Browse files

Fix #2758: Uneditable inputs in input-prepend/append

1. Added a missing comma to the input-append's form control stack () to fix border-radius
2. Add  to the .uneditable-input in forms to remove the float as we do with all other form controls
parent 5179df19
Showing with 117 additions and 4 deletions
+117 -4
No preview for this file type
...@@ -791,7 +791,7 @@ select:focus { ...@@ -791,7 +791,7 @@ select:focus {
input[class*="span"], input[class*="span"],
select[class*="span"], select[class*="span"],
textarea[class*="span"], textarea[class*="span"],
.uneditable-input { .uneditable-input[class*="span"] {
float: none; float: none;
margin-left: 0; margin-left: 0;
} }
...@@ -1045,7 +1045,8 @@ select:focus:required:invalid:focus { ...@@ -1045,7 +1045,8 @@ select:focus:required:invalid:focus {
margin-right: -1px; margin-right: -1px;
} }
.input-append input, .input-append input,
.input-append select .uneditable-input { .input-append select,
.input-append .uneditable-input {
-webkit-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
......
...@@ -84,6 +84,10 @@ ...@@ -84,6 +84,10 @@
margin-bottom: 36px; margin-bottom: 36px;
} }
h4 {
margin-bottom: 5px;
}
/* colgroup tests */ /* colgroup tests */
.col1 { .col1 {
background-color: rgba(255,0,0,.1); background-color: rgba(255,0,0,.1);
...@@ -96,6 +100,7 @@ ...@@ -96,6 +100,7 @@
} }
</style> </style>
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
...@@ -103,6 +108,11 @@ ...@@ -103,6 +108,11 @@
<p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p> <p class="lead">One stop shop for quick debugging and edge-case tests of CSS.</p>
</header> </header>
<!-- Tables
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Tables</h1> <h1>Tables</h1>
</div> </div>
...@@ -269,6 +279,52 @@ ...@@ -269,6 +279,52 @@
</div><!--/row--> </div><!--/row-->
<!-- Forms
================================================== -->
<div class="page-header">
<h1>Forms</h1>
</div>
<div class="row">
<div class="span4">
<h4>Prepend and append on inputs</h4>
<form>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
</div>
<div class="controls">
<div class="input-append">
<input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
</div>
</div>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
</div>
</div>
</form>
</div><!--/span-->
<div class="span6">
<h4>Prepend and append with uneditable</h4>
<form>
<div class="input-prepend">
<span class="add-on">$</span><span class="span2 uneditable-input">Some value here</span>
</div>
<div class="input-append">
<span class="span2 uneditable-input">Some value here</span><span class="add-on">.00</span>
</div>
</form>
</div><!--/span-->
</div><!--/row-->
<!-- Footer <!-- Footer
================================================== --> ================================================== -->
<footer class="footer"> <footer class="footer">
......
...@@ -8,6 +8,10 @@ ...@@ -8,6 +8,10 @@
margin-bottom: 36px; margin-bottom: 36px;
} }
h4 {
margin-bottom: 5px;
}
/* colgroup tests */ /* colgroup tests */
.col1 { .col1 {
background-color: rgba(255,0,0,.1); background-color: rgba(255,0,0,.1);
...@@ -20,6 +24,7 @@ ...@@ -20,6 +24,7 @@
} }
</style> </style>
<!-- Masthead <!-- Masthead
================================================== --> ================================================== -->
<header class="jumbotron subhead" id="overview"> <header class="jumbotron subhead" id="overview">
...@@ -27,6 +32,11 @@ ...@@ -27,6 +32,11 @@
<p class="lead">{{_i}}One stop shop for quick debugging and edge-case tests of CSS.{{/i}}</p> <p class="lead">{{_i}}One stop shop for quick debugging and edge-case tests of CSS.{{/i}}</p>
</header> </header>
<!-- Tables
================================================== -->
<div class="page-header"> <div class="page-header">
<h1>Tables</h1> <h1>Tables</h1>
</div> </div>
...@@ -191,3 +201,49 @@ ...@@ -191,3 +201,49 @@
</table> </table>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<!-- Forms
================================================== -->
<div class="page-header">
<h1>Forms</h1>
</div>
<div class="row">
<div class="span4">
<h4>Prepend and append on inputs</h4>
<form>
<div class="controls">
<div class="input-prepend">
<span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
</div>
</div>
<div class="controls">
<div class="input-append">
<input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">@</span>
</div>
</div>
<div class="controls">
<div class="input-prepend input-append">
<span class="add-on">$</span><input class="span2" id="prependedInput" size="16" type="text"><span class="add-on">.00</span>
</div>
</div>
</form>
</div><!--/span-->
<div class="span6">
<h4>Prepend and append with uneditable</h4>
<form>
<div class="input-prepend">
<span class="add-on">$</span><span class="span2 uneditable-input">Some value here</span>
</div>
<div class="input-append">
<span class="span2 uneditable-input">Some value here</span><span class="add-on">.00</span>
</div>
</form>
</div><!--/span-->
</div><!--/row-->
...@@ -243,7 +243,7 @@ select:focus { ...@@ -243,7 +243,7 @@ select:focus {
input[class*="span"], input[class*="span"],
select[class*="span"], select[class*="span"],
textarea[class*="span"], textarea[class*="span"],
.uneditable-input { .uneditable-input[class*="span"] {
float: none; float: none;
margin-left: 0; margin-left: 0;
} }
...@@ -408,7 +408,7 @@ select:focus:required:invalid { ...@@ -408,7 +408,7 @@ select:focus:required:invalid {
} }
.input-append { .input-append {
input, input,
select select,
.uneditable-input { .uneditable-input {
.border-radius(3px 0 0 3px); .border-radius(3px 0 0 3px);
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment