Используя jqTransform в скрытой форме контакта, выберите значение поля не отображается

Question

Извините, если это задница, но я мог бы действительно использовать некоторую помощь здесь:

http://dev.rjlacount.com/treinaAronson-form/

Контактную форму можно увидеть, нажав кнопку «Контакт» в левом верхнем углу. Я использую плагин jQTransform jQuery для стилизации. Первоначально он скрыт с отображением: нет; применяется к элементу div с идентификатором «панель» и вставляется со следующим:

$("#flip").click(function(e){
    e.preventDefault();
    $("#panel").slideToggle("3000");
});

При такой настройке форма контакта не отображает текущее значение поля выбора внутри своего поля. Если я вместо этого уберу дисплей: нет; правило для панели div из моего CSS и скрытие формы после загрузки страницы:

$("#panel").hide();

Форма отображается правильно. Кто-нибудь знает, как я могу заставить это работать и избежать вспышки открытой панели, которую я получаю, если я прячу ее с jQuery после загрузки страницы?

Большое спасибо за любой совет. Пожалуйста, дайте мне знать, если я могу предоставить больше информации.

Answer 1

Проблема в том, что jqtransform устанавливает ширину для метки (текущее видимое значение в преобразованном выделении), чтобы соответствовать ширине исходного выделения.

Если для исходного выбора (или его родителя) установлено display:none, и для него не задана ширина css, результат .width() для этого элемента равен нулю.

Фактически вы можете проверить (используя Firebug или Google Chrome Dev Tools), что контактная форма не отображает текущее значение элемента select, а отображает его с шириной, равной нулю.

Самое простое решение в вашем случае, это установить (в вашем файле CSS) фиксированную ширину для выбора, который является частью контактной формы.Таким образом, даже если они будут сначала скрыты, jqtransform установит правильную ширину для метки.Например:

/* css declaration */
#change-form select {
    width: 390px;
}

Примечание: конечно, есть и другие способы заставить его работать, включая настройку сценария jqtransform в соответствии с вашим конкретным вариантом использования.Часть скрипта, связанная с установкой указанной ширины метки, начинается со строки 289.