Question

this is how my form behave when i insert several tags but i want it to be like the one of this site. As you can see the scroll bar appears and a new is created. how can i keep everything on the same row?

http://jsfiddle.net/H86Zy/2/

Answer 1

The problem is that an height is defined, so the containing <div /> keeps its height and a scrollbar appears.

In the css, remove the height rule for the class .taginput:

div.tagsinput {
    border:1px solid #CCC;
    background: #FFF;
    padding:5px;
    width:300px;
    /*height:100px;*/
    overflow-y: auto;
}

The plugin also has a default value of 100px so you have to set the option when initializing:

$('#tagbox_a_1').tagsInput({ height: 'auto' });

Here’s a fiddle to illustrate.