jqTransform: Ширина исчезает, когда div скрыт с помощью display: none in style. Какое решение?

Question

Я использую плагин jqTransform для улучшения внешнего вида и формы моей формы. Это работает хорошо. Теперь я добавил div на страницу со стилем = "display: none;" и в событии (нажатие кнопки) на странице, я пытаюсь показать div. Но похоже, что ширина div, которые создаются jQtrasform, становятся только 0 px.

Мой HTML

<div id="divUserInfo" style="display:none;">
  <input type="text" id="txtName" />
</div>

и в моем javascript я показываю div на

function ButtonClicked()
{
 $("#divUserInfo").fadeIn(100);
}

Если я изменю отображение: нет, чтобы отобразить: block. Это будет работать с jQTrasnform. Но я хочу скрыть div в загрузке страницы и показывать только при вызове функции ButtonClicked ().

После некоторого поиска в Google, я узнал, что когда div скрыт, плагин устанавливает ширину как 0 для своих элементов.

Есть мысли?

Answer 1

У меня была точно такая же проблема, и после некоторого копания я смог ее решить следующим образом:

1. Вместо display: none; используйте visibility:collapse;
2. Установите ширинуэлементы, которые должны быть преобразованы в авто width: auto !important;

Answer 2

У меня была такая же проблема, и я решил с «видимостью».Это 100 процентов работ ...

$(".c-ekleyin").click(function(){
$(".sel-boxrow2").css("visibility" , "inherit");
$(".c-ekleson").show();
$(".c-ekleyin").hide();
});

<div class="sel-boxrow2" style="visibility:hidden;">
         <select name="select2" style="width:42px;">
             <option value="">---</option>
             <option value="opt1">1</option>
         </select>

Answer 3

В моем сценарии я работал на странице поиска, где во время загрузки формы есть окно поиска с небольшим количеством параметров поиска, и пользователь может сделать поиск конкретным, нажав на кнопку расширенного поиска, которая будет $.slideToggle()скрытый div, содержащий расширенные параметры поиска.Проблема, с которой я столкнулся, заключалась в том, что jqTransform устанавливает высоту и ширину любого элемента формы, который он преобразует, если он скрыт, используя свойство display:none таблицы стилей, которое я использовал, чтобы скрыть дополнительные параметры div до того, как $.slideToggle() установит его для блокировки,поэтому я установил ширину и высоту преобразованных элементов, написав функцию обратного вызова для $.slideToggle()

 $("#advancedSearchDIV").slideToggle("slow", function(){
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").each(
        function() {
        $(this).width(246);
        var height = 24;
        if($(this).children().length >= 6){
            height = 5 * height;
        } else {
            height = ($(this).children().length - 1) * height;
        }
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").height(height);
    $("#advancedSearchDIV div.jqTransformSelectWrapper ul").css("overflow","auto");
    });
});

Answer 4

Попробуйте это:

 <div id="divUserInfo" style="width:300px;display:none;">
     <input size="30" type="text" id="txtName" />
 </div> 

или

 <div id="divUserInfo" style="display:none;">
    <input size="30" type="text" id="txtName" style="width:300px;" />
 </div>

Answer 5

У меня была такая же проблема, и вот как я ее решил.

Вместо использования display:none в CSS, чтобы скрыть форму, которую я использую height:0;overflow:hidden.

Далее, в моемjs Я использую animate вместо slideToggle, который я использовал раньше для отображения формы.В моем случае код выглядит следующим образом:

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

Примечание: #showAdvaced - это идентификатор кнопки для отображения расширенных параметров, а #sfBlock03 - это идентификатор элемента, содержащего расширенныйform.

Надеюсь, это поможет.

Answer 6

Сегодня я искал исходный код для jqTransform, так как он, похоже, неправильно указывал ширину содержащего элемента.Кажется, он также смотрит на атрибут size вашего поля ввода.

Так что вы можете попробовать:

<div id="divUserInfo" style="display:none;">
  <input size="30" type="text" id="txtName" />
</div>

Обратите внимание, что в источнике плагина он умножает размер на 10и затем добавив 10px, затем сделав что-то еще в стиле фанк для сафари.Возможно, вам придется немного повозиться с этим.

Надеюсь, что это сделает за вас: D

Answer 7

Вы явно определили #divUserId в своем CSS?

#divUserId{ width:300px;display:none;}