jQuery UI SelectMenu Dropdown - открывается ВВЕРХ вместо ВНИЗ

Question

Я использую меню выбора JQuery UI и иногда возникают некоторые проблемы.

Это расположено в верхнем левом углу страниц моих пользователей. Используя тип "раскрывающийся список / адрес", иногда (на первый взгляд случайный) раскрывающийся список открывается ВВЕРХ, а не ВНИЗ, и вы не можете выбрать какие-либо параметры в нем, кроме первого, потому что все это "над" экраном.

Кто-нибудь знает настройки / опции там, чтобы заставить его открыться? Спасибо!

обновление.... 23.11.11 13:11 est Вот код звонка:

$(function(){
            $('select#selectionA').selectmenu({
                style:'dropdown', 
                menuWidth: 220,
                positionOptions: {
                    collision: 'none'
                },
                format: addressFormatting
            });
        });

Answer 1

Плагин использует утилиту Position библиотеки jQuery UI. Если вы посмотрите на параметры по умолчанию в источнике плагина, есть positionOptions свойство, которое используется в функции _refreshPosition():

options: {
    transferClasses: true,
    typeAhead: 1000,
    style: 'dropdown',
    positionOptions: {
        my: "left top",
        at: "left bottom",
        offset: null
    },
    width: null,
    menuWidth: null,
    handleWidth: 26,
    maxHeight: null,
    icons: null,
    format: null,
    bgImage: function() {},
    wrapperElement: "<div />"
}

_refreshPosition: function() {
    var o = this.options;

    // if its a pop-up we need to calculate the position of the selected li
    if ( o.style == "popup" && !o.positionOptions.offset ) {
        var selected = this._selectedOptionLi();
        var _offset = "0 " + ( this.list.offset().top  - selected.offset().top - ( this.newelement.outerHeight() + selected.outerHeight() ) / 2);
    }
    // update zIndex if jQuery UI is able to process
    this.listWrap
        .zIndex( this.element.zIndex() + 1 )
        .position({
            // set options for position plugin
            of: o.positionOptions.of || this.newelement,
            my: o.positionOptions.my,
            at: o.positionOptions.at,
            offset: o.positionOptions.offset || _offset,
            collision: o.positionOptions.collision || 'flip'
        });
}

Вы можете видеть, что он использует значение по умолчанию 'flip' если ничего не предусмотрено для collision опция положения утилиты, которая есть. Согласно документации jQuery UI:

переверните: на противоположную сторону, и обнаружение столкновений запускается снова, чтобы увидеть, подойдет ли оно. Если он не поместится ни в одном из положений, опция центра должна использоваться в качестве отступления.
fit: значит, элемент держится в нужном направлении, но перемещается так, чтобы он подходил.
none: не обнаруживать столкновения.

Так что я думаю, вы могли бы передать опцию при инициализации плагина, чтобы определить none для варианта столкновения:

$('select').selectmenu({
    positionOptions: {
        collision: 'none'
    }
});

Еще не проверял, это просто взглянув на код.

---

Изменить следующий комментарий

Я заметил, что версия javascript, доступная на github, и версия, используемая на сайте плагина, не совпадают. Я не знаю, какой вы используете, но тот, который используется на сайте, не имеет positionOptions опция на самом деле, поэтому не имеет смысла указывать ее при вызове selectmenu(),
Кажется, что невозможно напрямую ссылаться на javascript на сайте, так что вот код для иллюстрации:

defaults: {
    transferClasses: true,
    style: 'popup', 
    width: null, 
    menuWidth: null, 
    handleWidth: 26, 
    maxHeight: null,
    icons: null, 
    format: null
}

_refreshPosition: function(){   
    //set left value
    this.list.css('left', this.newelement.offset().left);

    //set top value
    var menuTop = this.newelement.offset().top;
    var scrolledAmt = this.list[0].scrollTop;
    this.list.find('li:lt('+this._selectedIndex()+')').each(function(){
        scrolledAmt -= $(this).outerHeight();
    });

    if(this.newelement.is('.'+this.widgetBaseClass+'-popup')){
        menuTop+=scrolledAmt; 
        this.list.css('top', menuTop); 
    }   
    else { 
        menuTop += this.newelement.height();
        this.list.css('top', menuTop); 
    }
}

Я смог заставить его работать, как я впервые описал с версией из github. На мой взгляд, это более свежая / полная версия. Кроме того, он был обновлен несколько дней назад.

Я создал небольшую тестовую страницу с двумя вариантами выбора. Я изменил обе позиции для раскрывающегося списка, чтобы показать выше.
В первом не указана опция столкновения, поэтому используется 'flip', а раскрывающийся список отображается ниже, потому что сверху недостаточно места.
Для второй не указано "none", и раскрывающийся список отображается выше, даже если места недостаточно.

Я поместил небольшой тестовый проект в свой Dropbox.

Answer 2

Я поддерживаю плагин Selectmenu. В настоящее время существует три версии, для получения дополнительной информации см. Вики: https://github.com/fnagel/jquery-ui/wiki/Selectmenu

Я полагаю, вы используете мою вилку. Проблема столкновения может быть связана с этим исправлением https://github.com/fnagel/jquery-ui/pull/255, пожалуйста, попробуйте последнюю версию.

Чтобы использовать полосу прокрутки, используйте параметр maxHeight.