All posts tagged position

  • September 26, 2013

    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

    1 Comment / JSF, Primefaces /