jquery Tag-it plugin's input field styling

Question

html

<p> Tags:<input  name="tags" id="tags" /></p>

jquery

$('#tags').tagit( {tagLimit:3});

I want to control the size of input field,how can i do that ?

Answer 1

If you look at the dynamic HTML that is generated by the tag-it plugin, ul.tagit is the class assigned to the UL that is generated. So to set the width to 200px in your CSS set:

ul.tagit {
    width: 200px;
}

Answer 2

(function( $ ) {
  $.fn.extend({
    tagit: function (params) {

       return this.each(function () {
          console.log(params);
          console.log(params['tagLimit'] );          
          $(this).attr('maxLength', params.tagLimit );
          $(this).parent().css('maxwidth', params.tagLimit );
          $(this).parent().css('width', params.tagLimit );

       });


   }
 } )

}( jQuery ));

But you can do it directly by jQuery too, like below:

 var _width = 3;
 $("p input").each( function() {
    $(this).css('width', _width);
    $(this).css('maxWidth', _width);
})

Answer 3

Since I had tag-it being used in multiple places, I decided to do it in Javascript. The size needs to be big enough that it doesn't do to a double line when you add tags to it. The basic code is:

    // adjust tag it size
    $("ul.tagit").attr("style", "width:450px;")

Offcourse, you can decide to choose something other than 450px.

However, I also wanted to line it up with other jquery-ui buttons, which I styled with ul, instead of li, so they would have a fairly snug fit with the search box. The bottom margin needs to be adjusted to have it line up more precisely with the buttons. Here is the code for that.

    // adjust tag it size and line it up with buttons
    $("ul.tagit").attr("style", "width:450px; display:inline-block; margin-bottom:-10px")