remove need for floats and IE hacks for input-prepend and input-append--boom

Author: mdo

docs/assets/bootstrap.zip

@@ -983,18 +983,6 @@ select:focus:required:invalid:focus {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
-  *zoom: 1;
-}
-.input-prepend:before,
-.input-append:before,
-.input-prepend:after,
-.input-append:after {
-  display: table;
-  content: "";
-}
-.input-prepend:after,
-.input-append:after {
-  clear: both;
 }
 .input-prepend input,
 .input-append input,
@@ -1021,8 +1009,7 @@ select:focus:required:invalid:focus {
 }
 .input-prepend .add-on,
 .input-append .add-on {
-  float: left;
-  display: block;
+  display: inline-block;
   width: auto;
   min-width: 16px;
   height: 18px;
@@ -1032,6 +1019,7 @@ select:focus:required:invalid:focus {
   line-height: 18px;
   text-align: center;
   text-shadow: 0 1px 0 #ffffff;
+  vertical-align: middle;
   background-color: #eeeeee;
   border: 1px solid #ccc;
   -webkit-border-radius: 3px 0 0 3px;
@@ -1043,14 +1031,8 @@ select:focus:required:invalid:focus {
   background-color: #a9dba9;
   border-color: #46a546;
 }
-.input-prepend .add-on {
-  *margin-top: 1px;
-  /* IE6-7 */
-
-}
 .input-append input,
 .input-append select .uneditable-input {
-  float: left;
   -webkit-border-radius: 3px 0 0 3px;
   -moz-border-radius: 3px 0 0 3px;
   border-radius: 3px 0 0 3px;
@@ -1066,12 +1048,6 @@ select:focus:required:invalid:focus {
   -moz-border-radius: 0 3px 3px 0;
   border-radius: 0 3px 3px 0;
 }
-.input-append input:first-child {
-  *margin-left: -160px;
-}
-.input-append input:first-child + .add-on {
-  *margin-left: -21px;
-}
 .search-query {
   padding-left: 14px;
   padding-right: 14px;

docs/assets/css/bootstrap.css

@@ -1187,8 +1187,7 @@ <h3>Form validation</h3>
             <label class="control-label" for="prependedInput">Prepended text</label>
             <div class="controls">
               <div class="input-prepend">
-                <span class="add-on">@</span>
-                <input class="span2" id="prependedInput" size="16" type="text">
+                <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
               </div>
               <p class="help-block">Here's some help text</p>
             </div>
@@ -1197,8 +1196,7 @@ <h3>Form validation</h3>
             <label class="control-label" for="appendedInput">Appended text</label>
             <div class="controls">
               <div class="input-append">
-                <input class="span2" id="appendedInput" size="16" type="text">
-                <span class="add-on">.00</span>
+                <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
               </div>
               <p class="help-block">Here's more help text</p>
             </div>

docs/base-css.html

@@ -1111,8 +1111,7 @@
             <label class="control-label" for="prependedInput">{{_i}}Prepended text{{/i}}</label>
             <div class="controls">
               <div class="input-prepend">
-                <span class="add-on">@</span>
-                <input class="span2" id="prependedInput" size="16" type="text">
+                <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text">
               </div>
               <p class="help-block">{{_i}}Here's some help text{{/i}}</p>
             </div>
@@ -1121,8 +1120,7 @@
             <label class="control-label" for="appendedInput">{{_i}}Appended text{{/i}}</label>
             <div class="controls">
               <div class="input-append">
-                <input class="span2" id="appendedInput" size="16" type="text">
-                <span class="add-on">.00</span>
+                <input class="span2" id="appendedInput" size="16" type="text"><span class="add-on">.00</span>
               </div>
               <p class="help-block">{{_i}}Here's more help text{{/i}}</p>
             </div>

docs/templates/pages/base-css.mustache

@@ -362,7 +362,6 @@ select:focus:required:invalid {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
-  .clearfix(); // Clear the float to prevent wrapping
   input,
   select,
   .uneditable-input {
@@ -376,8 +375,7 @@ select:focus:required:invalid {
     border-left-color: #ccc;
   }
   .add-on {
-    float: left;
-    display: block;
+    display: inline-block;
     width: auto;
     min-width: 16px;
     height: @baseLineHeight;
@@ -387,6 +385,7 @@ select:focus:required:invalid {
     line-height: @baseLineHeight;
     text-align: center;
     text-shadow: 0 1px 0 @white;
+    vertical-align: middle;
     background-color: @grayLighter;
     border: 1px solid #ccc;
     .border-radius(3px 0 0 3px);
@@ -396,16 +395,10 @@ select:focus:required:invalid {
     border-color: @green;
   }
 }
-.input-prepend {
-  .add-on {
-    *margin-top: 1px; /* IE6-7 */
-  }
-}
 .input-append {
   input,
   select
   .uneditable-input {
-    float: left;
     .border-radius(3px 0 0 3px);
   }
   .uneditable-input {
@@ -417,15 +410,6 @@ select:focus:required:invalid {
     margin-left: -1px;
     .border-radius(0 3px 3px 0);
   }
-  input:first-child {
-    // In IE7, having a hasLayout container (from clearfix's zoom:1) can make the first input
-    // inherit the sum of its ancestors' margins.
-    *margin-left: -160px;
-
-    &+.add-on {
-      *margin-left: -21px;
-    }
-  }
 }