yuku / textcomplete

Autocomplete for HTMLTextAreaElement and more.
https://yuku.takahashi.coffee/textcomplete/
MIT License
1.74k stars 303 forks source link

Couldn't able to adjust height of Suggestion dropdown #280

Closed dasguptahirak closed 8 years ago

dasguptahirak commented 8 years ago

I have implemented jquery-textcomplete plugin in my project but couldn't able to control the height of Suggestion dropdown. I want that the dropdown height should be adjusted according to its content and if content length exceeds the page height a scrollbar gets added automatically.

Kindly have a look on below snapshot image

klasjersevi commented 8 years ago

I have the same issue. Overriding the stye and setting the height to auto is a half workaround, but placement: "top" still gets wrong because of the wrong height.

dasguptahirak commented 8 years ago

I have also tried to set height as auto, but even then its not working.

$('#Edit-IFailureReason').textcomplete([{ // emoji strategy
    id: 'emoji',
    match: /\B:([\-+\w]*)$/,
    search: function(term, callback) {
      callback($.map(emojies, function(emoji) {
        return emoji.indexOf(term) === 0 ? emoji : null;
      }));
    },
    template: function(value) {
      return '<img src="media/images/emoji/' + value + '.png"></img>' + value;
    },
    replace: function(value) {
      return ':' + value + ': ';
    },
    index: 1
  }, { // tech companies
    id: 'tags',
    words: optionsTag1,
    match: /\b(\w{2,})$/,
    search: function(term, callback) {
      callback($.map(this.words, function(word) {
        return word.indexOf(term) === 0 ? word : null;
      }));
    },
    index: 1,
    replace: function(word) {
      return word + ' ';
    }
  }],

  ** { zIndex: '999', height: 'auto' }, **
 {
    onKeydown: function(e, commands) {
      if (e.ctrlKey && e.keyCode === 74) { // CTRL-J
        return commands.KEY_ENTER;
      }
    }
  }
).overlay([{
  match: /\B#\w+/g,
  css: {
    //  'background-color': '#d8dfea'
    'background-color': 'yellow'
  }
}]);

kindly help @klaslundberg and @yuku-t

Attanon commented 8 years ago

I have a similar issue. With the minified js. With classic js it works fine.

dasguptahirak commented 8 years ago

@Attanon I am using jquery.textcomplete.js but the problem still persists. Any idea what could be the issue?

pdrlps commented 8 years ago

Yep, got the same issue with the latest release with both minified and expanded scripts.

forby commented 8 years ago

Same here

phjanderson commented 8 years ago

The issue comes from this line: https://github.com/yuku-t/jquery-textcomplete/commit/1a262be773a480ece57ad555ee06846633905577#diff-6551d9079d8c312990e2a4a181c31ee3R483

Revert this change in the code and these drop down size will be normal again.

dpmontero commented 8 years ago

Good job @catherinek

yuku commented 8 years ago

Fixed by reverting v1.6.2 at #284