From 1131f49002453657f49fa91aa33b71055bb40b73 Mon Sep 17 00:00:00 2001
From: Arnold Daniels <arnold@jasny.net>
Date: Tue, 25 Mar 2014 15:29:31 +0100
Subject: [PATCH] Combine `.fileinput` and `.input-group`. Fixes #203

---
 docs/javascript.html | 20 ++++++++------------
 less/fileinput.less  | 20 +++++++++++++-------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/docs/javascript.html b/docs/javascript.html
index 7a30846c..03b5bb69 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -422,21 +422,17 @@ $('.inputmask').inputmask({
 
     <h3>File input widgets</h3>
     <div class="bs-example">
-      <div class="fileinput fileinput-new" data-provides="fileinput">
-        <div class="input-group">
-          <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
-          <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file"></span>
-          <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-        </div>
+      <div class="fileinput fileinput-new input-group" data-provides="fileinput">
+        <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
+        <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file"></span>
+        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
       </div>
     </div>
 {% highlight html %}
-<div class="fileinput fileinput-new" data-provides="fileinput">
-  <div class="input-group">
-    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
-    <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
-    <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
-  </div>
+<div class="fileinput fileinput-new input-group" data-provides="fileinput">
+  <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
+  <span class="input-group-addon btn btn-default btn-file"><span class="fileinput-new">Select file</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
+  <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
 </div>
 {% endhighlight %}
 
diff --git a/less/fileinput.less b/less/fileinput.less
index adf62d70..ad7ce467 100644
--- a/less/fileinput.less
+++ b/less/fileinput.less
@@ -64,16 +64,22 @@
   vertical-align: bottom;
 }
 
+.fileinput.input-group {
+    display: table;
+}
+
 // Not 100% correct, but helps in typical use case
+.fileinput-new.input-group .btn-file,
 .fileinput-new .input-group .btn-file {
   border-radius: 0 @border-radius-base @border-radius-base 0;
-}
-.fileinput-new .input-group .btn-file.btn-xs,
-.fileinput-new .input-group .btn-file.btn-sm {
-  border-radius: 0 @border-radius-small @border-radius-small 0;
-}
-.fileinput-new .input-group .btn-file.btn-lg {
-  border-radius: 0 @border-radius-large @border-radius-large 0;
+
+  &.btn-xs,
+  &.btn-sm {
+    border-radius: 0 @border-radius-small @border-radius-small 0;
+  }
+  &.btn-lg {
+    border-radius: 0 @border-radius-large @border-radius-large 0;
+  }
 }
 
 .form-group.has-warning .fileinput {