Twitter Bootstrap Question posted in

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

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Just add this to your css

    .bootstrap-tagsinput {
  white-space: nowrap;
  overflow: scroll;
}

    see working example: http://jsfiddle.net/a0LvLj7x/93/

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search