CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
acmsohail
acmsohail

Reputation: 1023

input tags should fit in same row instead of second row css issue

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. enter image description here

$(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

Answers (3)

Liaqat Saeed
Liaqat Saeed

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

James Solomon Belda
James Solomon Belda

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

Super User
Super User

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

Related Questions