How do I display a dropdown list 'above' the input element

Question

I am using jQuery Tokeninput plugin to display an autocomplete list of musical artist names, delivered via jsonp.

This all works fine, however I need to have the input in a fixed footer on the page meaning that of course, the dropdown list itself goes off the bottom of the page.

I would like to invert this behaviour and have the drop down list apear 'above' the input element, but I can't seem to find a way to achieve this.

Any ideas?

it would help to have a sample of your html/css structure for the footer as well as the output of tokeninput so that we know where to start from. Having said that, I can imagine how to make the list go up, the only thing you'd need to do is reverse the 'display' order of the elements so you get them to appear in the order desired (assuming that is desired) — Capagris, Nov 09 '11 at 17:20
Hi Sotkra, I can't for the life of me find a way of copying/pasting the HTML that 'tokeninput' generates. The HTML is appended to the body of the document and removed again on 'blur' therefore as soon as I click in firebug the HTML disappears. Would you be able to describe your ideas however as i'm sure I could work something out ocne pointed in the right direction. Many thanks! — gordyr, Nov 11 '11 at 12:46

score 1 · Answer 1 · edited Feb 06 '14 at 22:47

I modified the show_dropdown function to automatically determine if it should display above or below:

function show_dropdown() {
    if (input_box.is(':focus')) {
        var windowHeight = $(window).height();
        var docViewTop = $(window).scrollTop();
        var dropdownPosition = $(token_list).offset().top + $(token_list).outerHeight();
        var availableSpace = windowHeight - (dropdownPosition - docViewTop)
        var borderWidth = parseInt(dropdown.css('border-bottom-width'));

        if (availableSpace >= (settings.maxHeight + 2 * borderWidth)) {
            dropdown.css('bottom', '');
            $('body').css('position', '');

            dropdown.css({
                'border-top-width': 0,
                left: $(token_list).offset().left,
                top: $(token_list).offset().top + $(token_list).outerHeight()
            });
        } else {
            dropdown.css('top', '');

            var bodyHeight = $('body').outerHeight();
            var bodyTop = $('body').offset().top;
            var bottom;

            if ((bodyHeight + bodyTop) < dropdownPosition) {
                bottom = dropdownPosition - (bodyTop + bodyHeight) ;
            }
            else {
                bottom = (bodyTop + bodyHeight) - ($(token_list).offset().top + borderWidth);
            }

            dropdown.css({
                'border-top-width': borderWidth,
                'border-top-color': dropdown.css('border-bottom-color'),
                'border-top-style': dropdown.css('border-bottom-style'),
                'bottom': bottom,
                'left': $(token_list).offset().left - parseInt($('body').css('margin-left')),
                'position': 'absolute'
            });
            $('body').css({
                'position': 'relative'
            });
        }
        dropdown.css({
            maxHeight: settings.maxHeight,
            overflow: 'auto',
            zIndex: settings.zIndex
        }).show();
    }
}

I've also added a maxHeight property to tokenInput and use it to both check for space and set the size of the dropdown.

Try it out here: http://jsfiddle.net/colin_young/dvuHD/19/ (note that my version has some significant modifications from the stock version, I just haven't had a chance to create pull-requests for them).

No attempt is made to ensure there is space above however. The assumption is that if there is no space below and none above there isn't a lot you can do, although centering on the input element might be a good compromise.

I should note that my solution has some positioning issues, so it's not a completely generic one. You need to test it in your specific implementation. — Colin Young, Apr 18 '13 at 16:58

score 0 · Answer 2 · answered Jul 23 '12 at 10:41

I think that you have to change the code in show_dropdown() function, inside jquery.tokeninput.js file:

function show_dropdown() {
        dropdown
            .css({
                position: "absolute",
                top: $(token_list).offset().top + $(token_list).outerHeight(),
                left: $(token_list).offset().left,
                zindex: 999
            })
            .show();
    }

Just adjust the "top" ad "left" parameters properly.

How do I display a dropdown list 'above' the input element

2 Answers2