Кнопки мобильной панели Jquery работают до 300 пикселей

Question

Я построил панель соответствующего размера, например:

<div data-role="panel" data-position="right" data-display="overlay" data-theme="a"
id="add-form" style="width:50%; max-width:500px;" data-position-fixed="true">

По какой-то причине панель перестает работать на отметке 300 пикселей. Как и в случае, размер панели будет изменяться в зависимости от ширины области просмотра, но после 300px ширины ничего не будет кликать Когда ширина панели превышает 300 пикселей, часть кнопок будет активирована, а часть - нет. Я пытался добавить! Важно ко всему, это тоже не помогает. Я использую jQuery mobile 1.4.3 (для настольного сайта мне больше нравится внешний вид панелей, форм и кнопок, чем для настольного jQuery). Да, я назвал jQuery и его CSS последними в теге head, иначе панель вообще не будет работать

Answer 1

Я делаю снимок в темноте здесь, так как не вижу остальной вашей разметки.

Я смоделировал скрипку на http://jsfiddle.net/a9f22n70/1/ того, что, как я думаю, вы имели в виду. При загрузке я увидел несколько классов, добавленных к элементу панели (от jQuery mobile), которые вызывали проблемы с разметкой на рабочем столе. Я удалил все классы при загрузке и снова добавил класс "ui-panel". Это очистило вещи для меня.

Разметка, которую я использовал, чтобы проверить, была:

<div data-role="panel" data-position="left" data-display="overlay" data-theme="a"id="add-form" style="width:50%; max-width:500px;background:red;" data-position-fixed="true">
    <a href="index.html" data-role="button">Link button</a>
</div>

JQuery (очень простой) выглядит следующим образом:

$(document).ready(function(){
    $("#add-form").attr("class","").addClass("ui-panel");
})

Опять же, я предположил, что вы хотите использовать только элемент # add-form.

Как говорится, предположение - мать всех... так что, надеюсь, я ударил ногтем по голове!

ОБНОВИТЬ

После изучения кода в вашей скрипке проблема (для меня) заключается в наличии класса "ui-panel-dismiss" на панели самой себя. Удаление этого класса (с помощью моего инструмента инспектора для тестирования) исправило эту проблему.

Это что-то вроде хака, но вы можете удалить этот класс из панели, используя jQuery после загрузки страницы, используя removeClass(); функция.

РЕДАКТИРОВАТЬ

Вот рабочая скрипка, решающая проблему: http://jsfiddle.net/smoewxd4/3/

ЗАКЛЮЧИТЕЛЬНЫЙ ВЕРДИКТ

Решение CSS, которое вы предложили в своих комментариях, работало, но в результате все панели были бы настроены на 50% ширины. Вместо этого я предлагаю использовать этот селектор CSS, чтобы сделать его специфичным для элемента # add-form, а также исключить использование! Important:

#add-form.ui-panel.ui-panel-dismiss{ width:50%; }