jQuery TextExt: max height and scrollbar

Question

I'm using the jQuery TextExt plugin (http://textextjs.com/) to create an input field where the user can enter languages as tags, similar to the Facebook way of entering Tags.

Overall, the plugin works great.

However, I have hit a snag, which I can't seem to overcome. I am using TextExt on an Input field, like this:

<script type="text/javascript">
    $('#id_languages').textext({
    plugins : 'tags prompt suggestions arrow autocomplete',
    tagsItems : ['English'],
    suggestions : languages, //variable set earlier
    prompt : 'Add more here...',
});
</script>

Which works as it should. Now, the more tags I add, the more the input field grows (as expected).

However, at some point, it grows beyond the height that is acceptable in my given layout.

Is there a working way of specifying the max height of the input element using TextExt, plus adding a vertical scrollbar, without having the Suggestions dropdown pop up inside the div with the scrollbar?

I hope that makes sense, I'm a bit confused myself at the moment.

Answer 1

I've checked the source code, and there's no place it can be changed in order to accomplish what you need without a hack.

The closest answer to that is to limit the number of tags per input, which can be done like described here: How to limit total number of inputs to textExt plugin?

   $('#id_languages').textext({
                plugins : 'tags autocomplete',
                tagsItems : Sourcearray,
                ext: {
                   tags: {
                     addTags: function(tags) {
                         if(checkLength()) {
                            $.fn.textext.TextExtTags.prototype.addTags.apply(this, arguments);
                         }
                     }
                   }
                 }
   });

and here's the validation function checkLength():

function checkLength(){
   if($("#id_languages").next().children().length < 4){
      return true;
   }
  return false;
}

Where the number 4 is the number of tags allowed.

If this wouldn't be satisfactory, you will have to hack into textext.core.js and textext.plugin.tags.js and look for the following functions:

invalidateBounds(), preInvalidate() and postInvalidate() and play with the height manipulation.