I'm using the otherwise excellent bootstrap-tagsinput in my app, but when I try to combine it with a Bootstrap 3 input-group
, the input-group breaks.
Is there a way to fix this?
jsFiddle here: http://jsfiddle.net/cp5Lvtdo/2/
Screenshot:
Code:
<form id="defaultForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Cities</label>
<div class="col-lg-5">
<div class="input-group">
<input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
<div class="input-group-addon">
Addon text
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Cities</label>
<div class="col-lg-5">
<div class="input-group">
<input type="text" name="cities" id="aa" class="form-control" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
<button type='button' class='btn btn-primary input-group-btn'>
Button text
</button>
</div>
</div>
</div>
</form>
First thing you need to do is add this css for your input group
.input-group .bootstrap-tagsinput {
width: 100%;
margin-bottom: 1px;
}
Then change your button code to look like this
<span class='input-group-btn'>
<button type='button' class='btn btn-primary'>
Button text
</button>
</span>
Here's your fiddle with these changes http://jsfiddle.net/cp5Lvtdo/3/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.