JQuery UI selectmenu не идет "поверх" всех других элементов страницы (проблемы UniForm)

Question

Я использую uniForm (http://sprawsm.com/uni-form/) и меню выбора пользовательского интерфейса jQuery (http://jsfiddle.net/fnagel/hsn95/light/).

)

Проблема в том, что выпадающее меню не идет "поверх" элементов uniForm ... так что это действительно смешно. Я попытался изменить z-индекс в selectmenu.css, но мне не повезло ....

Есть идеи у кого-нибудь?

Я должен добавить, что я удалил это из uniForm и у меня нет проблем, но, боюсь, должна быть причина, по которой он там ...

z-index:1;

Answer 1

Вы должны изменить как z-индекс, так и позицию на относительную при исходном выборе. Это будет работать.

<select style='position:relative;z-index:100'>

Answer 2

У меня были проблемы с z-индексами при использовании диалогового окна jQuery и выбора меню.

Чтобы решить эту проблему, я нашел z-index диалогового окна и установил для него раскрывающуюся часть меню выбора.

Я использовал что-то вроде этого:

var dialogZindex = $('.ui-dialog').css('z-index');
$('.ui-selectmenu-menu-dropdown').css('z-index', dialogZindex);

Answer 3

Вот репост моего ответа на тот же вопрос, который вы разместили на форуме поддержки Uni-Form:

Я не могу предложить здесь никакой всесторонней помощи, поэтому я просто объясню z-index.

Причина, по которой элементы Uni-Form имеют свойство z-index, связана с другим свойством, а именно с позицией: относительной; и существует правило z-index, чтобы гарантировать, что относительно позиционированные элементы находятся в стеке достаточно низко, чтобы другие абсолютно позиционированные элементы могли проходить через них, что по иронии судьбы является именно той проблемой, с которой вы столкнулись. Скорее всего, это связано с тем, что jQuery SelectMenu явно не устанавливает свойство z-index для его абсолютно позиционированных элементов (что в идеале должно быть).

Удаление свойства z-index из Uni-Form совершенно нормально в этом случае, поэтому было бы установить явное значение z-index (любое значение больше 1) для абсолютно позиционированного элемента jQuery SelectMenu.

Answer 4

У меня была та же проблема с автозаполнением пользовательского интерфейса JQuery, скрывающимся за модальным диалоговым окном Foundation.

Решение, которое я нашел, было правилом CSS:

.ui-front{ z-index:1010; } /*get in front of .reveal-modal z-index:1005*/

Answer 5

Вы можете исправить это, используя свойство appendTo в selectmenu. Вы можете передать идентификатор / класс деления, которое вы хотите, чтобы ваше меню выбора появилось сверху. Это сработало для меня.

Answer 6

Я использовал Удаленную отладку на Android с Chrome (https://developer.chrome.com/devtools/docs/remote-debugging)), чтобы найти класс jQuery всплывающего окна пользовательского интерфейса меню выбора (.ui-popup-container) и установить его z-индекс с помощью:

.ui-popup-container {
    z-index: 1000010;
}

Мой z-индекс настолько велик, потому что сторонний элемент пользовательского интерфейса имеет настолько большой z-индекс, что я хочу быть сверху.

Answer 7

По моим испытаниям работает следующий рецепт.

$("#selectId").selectmenu("menuWidget").parent().css("z-index", "9999");

Answer 8

В моем случае это помогло установить только ширину меню выбора.

$( "#myid" ).selectmenu({width:100});

Без этого за диалоговым окном появляется выпадающее меню.