github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

Combine .fileinput and .input-group. Fixes #203

Browse Source
This commit is contained in:
Arnold Daniels
2014-03-25 15:29:31 +01:00
parent 127634d3dd
commit 1131f49002
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
docs/javascript.html
View File

@@ -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 %}

20
less/fileinput.less
View File

@@ -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 {