Reputation: 1023
Please check the jsfiddle
I have used bootstrap tags for my current system. But when the input tags are added more than 6 or 7 then it keeps adding in the second row. I want to fit it to first row like this image doesn't want to make it second row. Please help me with css.
$(document).ready(function() {
$('.tags').tagsinput({
allowDuplicates: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-lg-6">
<input type="text" value="" class="tags" />
<div class="items"></div>
</div>
Upvotes: 1
Views: 1042
Reputation: 428
add overflow scroll like this to this class
.bootstrap-tagsinput {
white-space: nowrap;
width: auto;
min-width: 100%;
max-width: none;
overflow:scroll;
}
$(document).ready(function() {
$('.tags').tagsinput({
allowDuplicates: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-lg-6">
<input type="text" value="" class="tags" />
<div class="items"></div>
</div>
Upvotes: 0
Reputation: 976
Just add this to your css
.bootstrap-tagsinput {
white-space: nowrap;
overflow: scroll;
}
see working example: http://jsfiddle.net/a0LvLj7x/93/
Upvotes: 2
Reputation: 9642
You can use white-space: nowrap
for this. check updated snippet below..
$(document).ready(function() {
$('.tags').tagsinput({
allowDuplicates: true
});
});
.bootstrap-tagsinput {
white-space: nowrap;
width: auto;
min-width: 100%;
max-width: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<link href="https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/app.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-lg-6">
<input type="text" value="" class="tags" />
<div class="items"></div>
</div>
Upvotes: 1