improve inline-block of append/prepend inputs with font-size: 0;

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9803e2a6a2f0a0c851255c320d92f2cda2ebf1d6..838d5a611ae91a59a6b040cfad61edc14008892f 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1269,6 +1269,7 @@ textarea::-webkit-input-placeholder {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
+  font-size: 0;
 }
 
 .input-prepend input,
@@ -1280,6 +1281,7 @@ textarea::-webkit-input-placeholder {
   position: relative;
   margin-bottom: 0;
   *margin-left: 0;
+  font-size: 13px;
   vertical-align: middle;
   -webkit-border-radius: 0 3px 3px 0;
      -moz-border-radius: 0 3px 3px 0;
@@ -1307,6 +1309,7 @@ textarea::-webkit-input-placeholder {
   height: 18px;
   min-width: 16px;
   padding: 4px 5px;
+  font-size: 13px;
   font-weight: normal;
   line-height: 18px;
   text-align: center;

diff --git a/docs/base-css.html b/docs/base-css.html
index 8f0c092d8146f7f58c6ff81b49b2b7ce6020372c..4b9e6d1ede1d924fd81ebd10593b36702771568a 100644 (file)
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -965,11 +965,13 @@ For example, <code>section</code> should be wrapped as inline.
   <p>Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.</p>
   <form class="bs-docs-example">
     <div class="input-prepend">
-      <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
+      <span class="add-on">@</span>
+      <input class="span2" id="prependedInput" size="16" type="text" placeholder="Username">
     </div>
     <br>
     <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>
   </form>
 <pre class="prettyprint linenums">
@@ -985,7 +987,9 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <p>Use both classes and two instances of <code>.add-on</code> to prepend and append an input.</p>
   <form class="bs-docs-example form-inline">
     <div class="input-prepend input-append">
-      <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+      <span class="add-on">$</span>
+      <input class="span2" id="appendedPrependedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -998,11 +1002,14 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
   <p>Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.</p>
   <form class="bs-docs-example">
     <div class="input-append">
-      <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+      <input class="span2" id="appendedInputButton" size="16" type="text">
+      <button class="btn" type="button">Go!</button>
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+      <input class="span2" id="appendedInputButtons" size="16" type="text">
+      <button class="btn" type="button">Search</button>
+      <button class="btn" type="button">Options</button>
     </div>
   </form>
 <pre class="prettyprint linenums">

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 5ad952c850640a4caaf327ceb5dd30f5076989f3..9a122711a22bd3b2505fe03700d26d327fefff7a 100644 (file)
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -896,11 +896,13 @@
   <p>{{_i}}Wrap a <code>.add-on</code> and an <code>input</code> with one of two classes to prepend or append text to an input.{{/i}}</p>
   <form class="bs-docs-example">
     <div class="input-prepend">
-      <span class="add-on">@</span><input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
+      <span class="add-on">@</span>
+      <input class="span2" id="prependedInput" size="16" type="text" placeholder="{{_i}}Username{{/i}}">
     </div>
     <br>
     <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>
   </form>
 <pre class="prettyprint linenums">
@@ -916,7 +918,9 @@
   <p>{{_i}}Use both classes and two instances of <code>.add-on</code> to prepend and append an input.{{/i}}</p>
   <form class="bs-docs-example form-inline">
     <div class="input-prepend input-append">
-      <span class="add-on">$</span><input class="span2" id="appendedPrependedInput" size="16" type="text"><span class="add-on">.00</span>
+      <span class="add-on">$</span>
+      <input class="span2" id="appendedPrependedInput" size="16" type="text">
+      <span class="add-on">.00</span>
     </div>
   </form>
 <pre class="prettyprint linenums">
@@ -929,11 +933,14 @@
   <p>{{_i}}Instead of a <code>&lt;span&gt;</code> with text, use a <code>.btn</code> to attach a button (or two) to an input.{{/i}}</p>
   <form class="bs-docs-example">
     <div class="input-append">
-      <input class="span2" id="appendedInputButton" size="16" type="text"><button class="btn" type="button">Go!</button>
+      <input class="span2" id="appendedInputButton" size="16" type="text">
+      <button class="btn" type="button">Go!</button>
     </div>
     <br>
     <div class="input-append">
-      <input class="span2" id="appendedInputButtons" size="16" type="text"><button class="btn" type="button">Search</button><button class="btn" type="button">Options</button>
+      <input class="span2" id="appendedInputButtons" size="16" type="text">
+      <button class="btn" type="button">Search</button>
+      <button class="btn" type="button">Options</button>
     </div>
   </form>
 <pre class="prettyprint linenums">

diff --git a/less/forms.less b/less/forms.less
index 633ad45517acf40915ff359043765626d711b69f..9f5e721bbe364a920bfdffb869a595f692997f67 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -380,12 +380,14 @@ textarea {
 .input-prepend,
 .input-append {
   margin-bottom: 5px;
+  font-size: 0;
   input,
   select,
   .uneditable-input {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
+    font-size: @baseFontSize;
     vertical-align: middle;
     .border-radius(0 @inputBorderRadius @inputBorderRadius 0);
     // Make input on top when focused so blue border and shadow always show
@@ -402,6 +404,7 @@ textarea {
     height: @baseLineHeight;
     min-width: 16px;
     padding: 4px 5px;
+    font-size: @baseFontSize;
     font-weight: normal;
     line-height: @baseLineHeight;
     text-align: center;