Bootstrap + JQuery: How break lines of spans in div dynamically created by append

Question

I'm appending dynamically into using jquery .append command. I have problem with rendering multiple lines. If I add too many spans that do not fit in one line, next span is not moving to second line. All spans are still in one line.

 $(document).ready(function() { $("button").click(function(e) { addTag($("div#tag-line"),"tag"); }); }); function addTag(tagField, tagValue) { tag = '<span class="label label-info" style="margin: 2px">' + tagValue + '</span>' tagField.append(tag); tagField.hide().fadeIn('fast') } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="form-group"> <label for="tags" class="col-lg-3 control-label">Tags</label> <button> add </button> <h4> <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> </div> </h4> </div> 

When span is not added dynamicly everythings looks fine:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="form-group"> <label for="tags" class="col-lg-3 control-label">Tags</label> <div class="col-lg-9"> <input type="text" class="form-control" id="tokenfield"/> </div> <button> add </button> <h4> <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> <span class="label label-info" style="margin: 2px">asda</span> </div> </h4> </div> 

I'm bootstrap and jquery beginner and I'm convinced that I had to overlook something. I was looking for a similar example on the stack but could not find anything. Please help! :)

Answer 1

The difference between your dynamically added example and the hard coded one is white space. Each <span></span>\\n<span></span> is on it's own line in the hard coded example so there's a white space character in between each one. When you're dynamically adding them, they're all one one line with no characters in between them <span></span><span></span>

You can fix this by putting a space right after the span at the end of your dynamically injected markup.

tag = '<span class="label label-info" style="margin: 2px">' + tagValue + '</span> '

However, I think a more correct approach would be with CSS, changing the label's display to inline-block:

#tag-line .label { display: inline-block; }

Answer 2

Change the .label display: inline to inline-block;

.label {
    display: inline-block;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    }

Answer 3

Try this solution.

You have to add css to move span to next line.

and i also used min-height and max-height and overflow-y for scroll down your div if there is a more tabs.

Hope this will helps you. :)

 $(document).ready(function() { $("button").click(function(e) { addTag($("div#tag-line"),"tag"); }); }); function addTag(tagField, tagValue) { tag = '<span class="label label-info" style="margin: 2px; display: inline-block">' + tagValue + '</span>' tagField.append(tag); tagField.hide().fadeIn('fast') } 

 #tag-line {min-height:50px; max-height: 200px; max-width: 300px; word-wrap: break-word; overflow-y: scroll;} 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="form-group"> <label for="tags" class="col-lg-3 control-label">Tags</label> <button> add </button> <h4> <div id="tag-line" class="col-xs-6" style="border: 2px solid red"> </div> </h4> </div>