Primefaces: AutoComplete suggestions panel position fix

Somehow primefaces suggestions panel position detection is always top, and this sometimes causing an inability for the user to choose from the list, especially if it’s too long and not limited by results.

primefaces wrong autocomplete panel position

As you can see some of the suggestions are invisible.

I managed to solve this issue by overriding the alignPanel “CSS” of the autocomplete widget.

PrimeFaces.widget.AutoComplete.prototype.alignPanel = function() {
        var fixedPosition = this.panel.css('position') == 'fixed',
        win = $(window),
        positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null,
        panelWidth = null;

        if(this.cfg.multiple) {
            panelWidth = this.multiItemContainer.innerWidth() - (this.input.position().left - this.multiItemContainer.position().left);
        }
        else {
            panelWidth = this.input.innerWidth();
        }

        this.panel.css({
                        left:'',
                        top:'',
                        width: panelWidth
                })
                .position({
                    my: 'left top'
                    ,at: 'left bottom'
                    ,of: this.input
                    ,collision: 'none',
                    offset : positionOffset
                });
    }

just put this in the document.ready and the magic happens!

Or you can donwload the JS File and include it: autocomplete.panel.fix.js


primeright

If you think something is wrong please feel free to comment :)
  1. alicia says:

    Thank you for this fix!! It was driven me crazy!!

    Reply

Leave a reply.