Chosen: если select изначально скрыт, не работает

Да, вы должны исправить сценарий кофе. Также я за возможность настраивать скрытые элементы.

+1 столкнулся с этой проблемой сегодня

+1 как и я

В качестве обходного пути вы можете установить ширину созданного div с помощью флага !important :

#my_select_chzn {
  width: 100% !important;
}

Фактически, это приблизит вас к тому месту, где вы должны быть. Ширина не идеальна, но все будет видно.

#my_select_chzn {
  /* This is the only width setting you'll need to change. */
  width: 100% !important;
}
#my_select_chzn .chzn-drop {
  width: 100% !important;
}
#my_select_chzn .chzn-drop .chzn-search {
  width: 99% !important;
}
#web_template_exploit_name_chzn .chzn-drop .chzn-search input {
  width: 98% !important;
}

Более ранняя версия Chosen фактически проверяла, была ли установлена ​​ширина поля формы через css. Если да, то расчет ширины не использовался. Я думаю, что предпочитаю этот метод исправления добавлению 30 строк кода для тестирования скрытых элементов. Хотели бы вы, чтобы это работало?

Установите ширину:

  <select style="width:350px;" class="chzn-select">

Сначала тесты JS для установки ширины:

  <strong i="10">@f_width</strong> = if @form_field_jq.css('width')? then parseInt(@form_field_jq.css('width'),10) else @form_field_jq.width()

@pfiller в вашем коде есть небольшая ошибка. Если встроенный стиль имеет ширину в любых единицах измерения, кроме пикселей (например, em), код интерпретирует его как пиксели. см. строку 56 в selected.jquery.coffee

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

Привет, @pfiller , это не работает. И width (), и css ("width") возвращают 0 для скрытых элементов. Я использую технику getHiddenDimensions, и она хорошо работает.

кстати, вам нужно использовать его как для f_width, так и для get_side_border_padding

+1 за это.

Большая часть логики на сайте, на котором я интегрирую Chosen, полагается на то, что некоторые выборки скрываются при первой загрузке, поэтому мы получаем всевозможные проблемы с этим.

+1 тоже. Должны быть встроены проверки видимости.

: +1:: +1:: +1:

Как насчет решения, в котором ширина раскрывающегося списка не устанавливается постоянно при первом запуске, а просто изменяется до ширины текстового поля при его открытии? Таким образом, вам не нужно прикасаться к ширине поля ввода, просто предположите, что он установлен с помощью css, и читайте его каждый раз, когда открываете раскрывающийся список.

+1 за это. Я решил превратить Chosen в тип поля для ExpressionEngine CMS, но макеты публикации EE позволяют скрывать поля при загрузке страницы.

Я не уверен, связано ли это, но в случае EE было бы лучше, если бы ширина была плавной или просто всегда составляла 100% содержащего его элемента ...

http://www.alistapart.com/articles/now-you-see-me/

Столкнулся с этим ... это все еще происходит в последней версии

+1
Эта ошибка блокирует использование плагина Chosen для внутренних приложений в Netflix.

: +1: по этому вопросу сегодня столкнулся с этой проблемой

Вы можете скрыть свой контент с помощью: position: absolute; слева: -999em;
Таким образом, программы чтения с экрана и Google тоже смогут их «читать», и выпадающий список «Выбрано» БУДЕТ виден при его повторном отображении.

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

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

Я разверну это в производственном коде вскоре после тестирования.

@DelvarWorld, о каком запросе на

@pfiller Тот, который указан выше в этой ветке, https://github.com/DelvarWorld/chosen-hacks/commit/e9501568acae1988ba51b5a29269023d3400db42

Более важным, чем использование css, является использование «текущей» ширины элемента при рендеринге результатов вместо использования неправильно кэшированной ширины из конструкции Chosen.

Произошло много изменений, и я не совсем уверен, как лучше их объединить. Будет ли у вас в ближайшее время объединенная версия?

@bewest мой запрос на

@delvarworld Я знаю, просто хочу убедиться, что проводится правильное различие.

Можете ли вы попробовать обновить ветку с автоматической шириной с помощью HEAD? Я попытался выполнить слияние из аналогичной кассы примерно в конце августа, но поле ввода теперь имеет неправильную ширину (оно слишком велико, выходит за пределы ширины выбранного контейнера).

Я смотрю, но также была некоторая реорганизация ... конструктор был удален в пользу методов setup и finish_setup. Я также не знаком с coffeescript, поэтому ваш прогресс в слиянии может быть быстрее, чем у меня, и отправка запроса на перенос моя помощь, поскольку, похоже, этот вопрос вызывает большой интерес.

На самом деле, моя ветка прошла мимо этого изменения, и в конце концов я отказался от работы над прототипной версией. Моя вина, и я думаю, что на данный момент это невозможно объединить.

@DevarWorld Да, его нужно немного переработать, чтобы некоторые биты

Вы бы хотели попробовать еще раз?

Вежливая шишка ... Кто-нибудь над этим работает?

Chosen не работает для меня, так как он скрывает мой выбор, а затем не может вычислить ширину. Я должен взломать его, произвольно установив ширину для каждого из компонентов chzn в CSS. Это не похоже на то, как это должно работать, и на самом деле это даже не выглядит нормально, как на веб-сайтах, на которых я видел это.

Я тоже столкнулся с этой проблемой. Как оказалось, выбранный метод для получения ширины элемента не работает в более ранней версии jquery (извините, но у меня нет точных номеров версий). Как отмечалось выше, ошибка заключалась в том, что когда элемент не был виден, ширина возвращала 0. Эта ошибка очень хорошо документирована, и есть много способов ее обойти.

Решением для нас было просто перейти на последнюю версию JQuery. Да, нам пришлось внести некоторые исправления и протестировать старый код, который использовал jquery, но в конечном итоге он устраняет множество проблем и снижает потребность в небольших взломах для вашего js / css.

Я устанавливаю последний jquery, который упакован в jquery gem rails и jquery-ujs. Я полагаю, это все еще слишком старое?

Да, было бы неплохо иметь актуальный номер версии. Я могу подтвердить, что 1.6.2
тоже слишком старый.

В среду, 16 ноября 2011 г., 11:23, Кевин Эллиотт <
[email protected]

написал:

Я устанавливаю последний jquery, который упакован в jquery gem рельсов
и jquery-ujs. Я полагаю, это все еще слишком старое?

@RoyJacobs newest настоящее время составляет 1.7, поскольку он был выпущен.

@RoyJacobs Я могу подтвердить, что мы используем 1.6.4 без проблем.

Это странно. Да, гем jquery-rails использует jQuery 1.7. Но у меня все еще не работает.

Вы можете видеть, что это не рендеринг с шириной. Проверка показывает, что все рассчитанные значения ширины равны 0 пикселей. Это происходит, даже если я установил .chzn-select, чтобы иметь ширину в CSS или непосредственно в параметре стиля тега select.

https://skitch.com/kevinelliott/gjufg/winetribe
https://skitch.com/kevinelliott/gjufp/winetribe

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

Мысли?

Я действительно хотел бы, чтобы это работало в ЛЮБЫХ обстоятельствах (даже если мне придется это заставить). Кажется, ничего не работает. Я буду вынужден полностью отказаться от этого (и я, конечно, не захочу снова иметь дело с этим сломанным материалом).

Убедитесь, что к вашему выбору применен какой-либо CSS, таблица стилей или встроенный. Если вы делаете это с помощью таблицы стилей, это означает, что вам нужно внедрить элемент в DOM перед вызовом selected ().

Но я согласен, что сделать это правильно очень сложно. Я действительно хотел бы иметь возможность применять ширину к выбранному выбору с помощью CSS. Один класс, одна ширина, пиксели или%.
Тогда мой CSS будет выглядеть как

.example select, .example .chzn-smth {
ширина: 50%;
}

И это применило бы ширину правильно, независимо от того, как, когда и где вы выбрали выбранный.

Я пробовал это встроить и через таблицу стилей, но без изменений в поведении.

Довольно существенная проблема для лайтбоксов и аккордеонов. Кто-нибудь работает над патчем?

Я не думаю, что у кого-то есть! Я в шоке, потому что не понимаю, как это можно использовать для кого-то. Я даже не скрываю свой контент искусственно. Кажется, что это делает вызов selected (). Так странно.

@kevinelliott Я думаю, что те, у кого была эта проблема, либо элемент должен иметь ширину 224 пикселей, и мы устанавливаем display: none; непосредственно на элементе, а не в таблице стилей.

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

Спасибо, Ричард. Я обновил свой jQuery, и это не помогло. Странно то, что я не скрываю свой элемент select. Избранный это скрывает. Так что я даже не уверен, что происходит.

@kevinelliott Np. Мне любопытно, вы устанавливаете ширину своегоэлемент вообще? Если да, то вы используете проценты или пиксели?

Я. Ставлю пикселями. Я пробовал установить его в элементе напрямую с помощью атрибута style, а также пробовал это в CSS.

@kevinelliott Если честно, я немного растерялся. Единственные оставшиеся у меня предложения: 1) обернуть выбранный элемент в элемент (мы делаем это, и наши работы отлично работают) и 2) переходить по выбранной библиотеке, чтобы узнать, в какой выбранный момент скрывается ваш выбранный элемент ... Мне тоже пришлось сделать это, когда мы столкнулись с нашими проблемами.

Извини, что больше ничем не могу помочь.

У меня есть случай, когда даже с фиксированной шириной в select выбранном создать ширину: 0px.
Не могу понять почему, не работает в этой ситуации, а работает в других ...

@tiagobrito : У меня точно такая же проблема, и я никогда не мог ее решить, исправлено или нет.

@RichardBlair Спасибо за вашу помощь. Если вы думаете о чем-то еще, дайте нам знать :)

+
та же проблема, пожалуйста, исправьте

@tiagobrito , @dhampik не могли бы вы составить небольшую суть, которая демонстрирует проблему?

@bewest Я уже разобрался! Он добавляется, когда я использую jquery 1.4.x в своих проектах.
В следующий понедельник я расскажу вам правильную версию jquery, которая вызывает у меня ширину: 0 пикселей.

@bewest тоже подтверждаю,
что старые версии jquery (я полагаю, до 1.6.4)
испортить макет select, который изначально скрыт
Вот 2 скрипки:
беспорядочный макет (старый jquery): http://jsfiddle.net/dhampik/2E9fG/
правильный макет (новый jquery): http://jsfiddle.net/dhampik/Rs9Z3/

Слава богу, версия jquery была обновлена ​​новой версией фреймворка Yii)

У меня возникает эта проблема, когда я пытаюсь интегрировать Chosen в Trac. Начальные поля выбора в форме свойств заявки имеют ширину 0. По умолчанию свойства скрыты, и их можно развернуть, щелкнув ссылку. jQuery v1.7.1

Обновление: я работал над этой проблемой, поскольку, по крайней мере, трюк с CSS, упомянутый в сообщении блога foliotek, не работал с jQuery 1.7.1. Я еще не пробовал подход JS.

Мой способ обхода (для Trac):

$("#modify").parent().removeClass('collapsed');
$("#field-test").chosen();
$("#modify").parent().toggleClass('collapsed');

для тех, кто использует jQuery <= 1.7.1

Я работал над этой проблемой, используя jQuery Actual
Изменен selected.jquery.js # 301 с
this.f_width = this.form_field_jq.outerWidth();
к
this.f_width = this.form_field_jq.actual( 'outerWidth' );

// редактируем thx @koenpunt за комментарий 1.7.2

@midday Согласно README jquery.actual, это необходимо только для версий jQuery до 1.7.2.

В более старой версии jQuery (> = 1.7.1) возникли проблемы с поиском ширины / высоты невидимых элементов DOM.

@midday, спасибо, что обнаружили, что после реализации фактического плагина проблема с выбранным

У меня все еще есть эта проблема, есть идеи, как ее исправить?

То же самое здесь по-прежнему проблема - я не могу поверить, что это происходило годами ...

Я тоже столкнулся с этой проблемой. Хотел бы помочь.

Кажется, этот трюк с CSS работает:

/* Fix 100% width */
.chzn-container, .chzn-drop, .chzn-drop .chzn-search, .chzn-drop .chzn-search input {
  width: 100% !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width */
.chzn-container { width:250px !important; }

@gyopiazza. Это помогло мне решить проблему. Спасибо.

FWIW Я обнаружил, что установка минимальной ширины (даже без! Important) на входе .chzn-container, .chzn-drop и .chzn-search также работает для изначально скрытых выделений.

Мой способ обхода

css:

.chzn-container, .chzn-drop {
    width: 100% !important;
}

html:

вместо установки ширины в элементе select я добавляю div-оболочку к исходному элементу select и устанавливаю ширину оболочки.

Chosen теперь предлагает возможность инициализации с заданной шириной, которая отменяет любую попытку вычисления. Это, вероятно, удовлетворительный обходной путь для большинства случаев использования, когда выбор скрыт в точке инициализации:

$("select").chosen({ width: '50%' });
$("select").chosen({ width: '200px' });
$("select").chosen({ width: '15em' });

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

Есть ли у кого-нибудь проблемы с закрытием этого бага на основе этого решения?

Я использовал версию 0.9.8, и мои скрытые выделения работали нормально. Сегодня обновил до 0.9.14 и они перестали работать. Я использовал уменьшенную версию. Когда я перехожу на обычную версию, все снова работает нормально (selected.jquery.js 0.9.14). Это нормально? Ошибка в процессе миннификации?

Ни один из скрытых не работает для меня на jQuery min или full size 0.9.14.

У меня сработала новая опция «ширина». Работайте, по крайней мере, над новыми выбранными входами, которые ранее были скрыты.

@trisweb Это проект с открытым исходным кодом, и враждебность здесь не приветствуется. Здесь много людей, которые потратили много времени и энергии на то, чтобы сделать Chosen тем, чем он является сегодня. Пожалуйста, постарайтесь внести свой вклад в улучшение проекта или воздержитесь от комментариев. Спасибо.

@kenearley Я полностью осведомлен об этикете открытого исходного кода и должен был сделать свой комментарий более эффективным. Прости за это.

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

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

Это может быть серьезная проблема, поэтому эта ошибка существует так долго, но я уверен, что есть какое-то решение. Лично я не думаю, что новый атрибут «ширина» решает проблему, поскольку он по-прежнему зависит от конфигурации больше, чем от соглашения, и, таким образом, может привести к нефункционирующей нулевой ширине, выбранной в случае по умолчанию.

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

Нет. Не надо «кричать из-за шума». Если кто-то достаточно твердо чувствует, как должен быть написан код, он может предложить запрос на вытягивание или форк репо и изменить его по своему желанию.

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

@kenearley Я вежливо не согласен с вашим мнением о риторике, но, конечно, код всегда говорит громче, чем слова. На данный момент это нас раздражает, поэтому может появиться запрос на перенос, если я найду хорошее решение.

: +1: для исправления!

Я наблюдал за Chosen почти два года, и это все еще самое элегантное улучшение пользовательского интерфейса. Но эта скрытая проблема по-прежнему является серьезным препятствием, и стопроцентная ширина не является решением.
+1, чтобы исправить это. Выбрана команда Go!

+1 за исправление

В дополнение к официальному обходному пути, который позволяет вызывающей стороне программно устанавливать ширину, я бы также предложил достойный обходной путь, основанный на следующем потоке:

http://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element

Обходной путь в основном основан на этой функции:

// to be placed anywhere before the jquery.chosen initialization
    var getHiddenOffsetWidth = function (el) {
    // save a reference to a cloned element that can be measured
    var $hiddenElement = $(el).clone().appendTo('body');
    // calculate the width of the clone
    var width = $hiddenElement.outerWidth();
   // remove the clone from the DOM
   $hiddenElement.remove();
   return width;
};

Затем он вызывается следующей модификацией кода jquery.chosen (начиная с 1.0.0):

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + (($(this.form_field).is(":visible"))
            ? this.form_field.offsetWidth
            : getHiddenOffsetWidth(this.form_field)) + "px";
    }
};

См. Также # 795 для более подробной информации.

Быстрое исправление. Вместо того, чтобы скрывать ваш select сделайте $(elem).chosen(options) а затем $(elem).hide() т.е. сначала создайте выбранный элемент, а затем скройте его. Таким образом сохраняется исходный width .

Это еще не исправлено, 3 года открыты?

+1 за это исправление

В версии 0.9.8 этой ошибки не было! раньше вы вызывали jquery outerWidth для получения ширины, теперь вы используете HTML offsetWidth, который дает ноль ...

Я считаю, что он имеет в виду, что это регресс, и это многообещающе. Был ли
причина отказа от метода jQuery?

@pfiller У меня $("select").chosen({ width: '50%' }); отлично мне подходит. Это рабочий обходной путь для моих случаев использования.

Я использую $(this.form_field).outerWidth() чтобы получить ширину смещения под полным кодом:

AbstractChosen.prototype.container_width = function() {
    if (this.options.width != null) {
        return this.options.width;
    } else {
        return "" + $(this.form_field).outerWidth() + "px";
    }
};

+1 Мне очень нужно это исправление. По умолчанию я скрываю форму, и пользователь должен нажать кнопку, чтобы ее отобразить. Поскольку он скрыт, он неправильно устанавливает ширину моих выделений

@henesnarfel - вы можете попробовать просто использовать обходной путь, который @pfiller разместил здесь: https://github.com/harvesthq/chosen/issues/92#issuecomment -18163306

шишка, проблема все еще существует. Для этого должно быть встроенное решение. Я бы добавил +1.

Единственная работа, о которой я мог подумать, - это строка 455 (по крайней мере, в моем редакторе), которая возвращает следующий код из функции container_width :

return "" + this.form_field.offsetWidth + "px";

и заменил его на

return "" + $(this.form_field).outerWidth() + "px";

Проблема исчезла.

@ayyash не

Для меня это сработало (для удовольствия введите свои собственные размеры):

/* Fix  width bug */
.chosen-container, .chosen-drop, .chosen-drop .chosen-search, .chosen-drop {
  width: 220px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Input Box has to be slightly smaller, don't know why and I don't care. */
.chosen-search input {
    width: 210px !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* Override width of the whole thing */
.chosen-container { width:220px !important; }

Спасибо

@Thinklabsnk Спасибо, хорошее и быстрое исправление.

РЕДАКТИРОВАТЬ: это работает, только если все ваши выбранные элементы будут иметь одинаковую ширину.

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

Найдите эту строку кода в selected.jquery.js (строка 455 в моей версии):

        return "" + this.form_field.offsetWidth + "px";

и замените это на это:

        var calculatedWidth = this.form_field.offsetWidth;
        // Fix for zero width on hidden inputs.
        if (0 == calculatedWidth) {
          var clone = this.form_field_jq.clone();
          clone.css("visibility", "hidden");
          clone.appendTo('body');
          calculatedWidth = clone.offsetWidth;
          clone.remove();
        }
        return "" + calculatedWidth + "px";

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

@danjjohnson Спасибо, это

Единственное, что пришлось изменить:

clone.offsetWidth; 

к

clone.outerWidth();

По какой-то причине clone.offsetWidth давал мне неопределенное значение.

С наилучшими пожеланиями,

Эта ошибка возникает в Firefox, никогда не тестируйте в Chrome или других.

1-е изображение (вверху)
Выбранная ширина набора, поскольку у нее есть полоса прокрутки, а ее нет. Это неверный результат.

2-е изображение (в центре)
Выбрана заданная ширина, так как у него есть полоса прокрутки, как на первом изображении, но на этот раз полоса прокрутки верна.

3-е изображение (внизу)
Таким должно быть первое изображение, пока у него нет полосы прокрутки. В этом тесте я установил выбранную ширину на width: 100% !important

's исправить с @johnmerced' для @danjjohnson s изменение:: Thumbsup

У меня есть другое исправление, простое и работает. Дело в том, чтобы ширина не становилась равной нулю:

   // don't let the width to be "0"
   $(".chosen-select,.chosen-multiple-select").each(function(){
        if($(this).width() == 0){
            $(this).width(240);
        }
    });
    // call it :)
    $(".chosen-select,.chosen-multiple-select").chosen({allow_single_deselect:true});

Привет,
Мое решение этой проблемы представляет собой комбинацию ранее опубликованных решений (выбрано 1.2.0):

    AbstractChosen.prototype.container_width = function () {
        if (this.options.width != null) {
            return this.options.width;
        } else {
            //Original:
            //return "" + this.form_field.offsetWidth + "px";
            //Workaround:
            if(this.form_field.offsetWidth > 0) {
                return "" + this.form_field.offsetWidth + "px";
            } else {
                if($(this.form_field).css('width')) {
                    return parseInt($(this.form_field).css('width'),10) + "px";
                } else {
                    return "" + $(this.form_field).outerWidth() + "px";
                }
            }
        }
    };

Просто определите статическую ширину CSS в пикселях для скрытых выделений.

Все еще требуется общее исправление.

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

Нет возможности динамически изменять размер выбранного объекта? Поскольку я знаю, когда изменить размер (событие изменения размера, onShow или подобное), это может быть обходным путем. Есть ли функция API для изменения размера выбранного объекта? Или как-то переинициализировать?

: +1: для исправления. Вбежал в это сегодня

: +1: Зря потратил впустую слишком много времени, отслеживая это.

По-прежнему проблема с размером в модальных окнах. Есть ли планы исправить это в версии 4.0?

@danjjohnson ваше исправление не устраняет проблему, когда первый элемент намного меньше других

на основе @danjjohnson , это то, что сработало для меня

взломать

найти линию

return "" + this.form_field.offsetWidth + "px";

заменить

var calculatedWidth = this.form_field.offsetWidth;
          // Fix for zero width on hidden inputs.
          if (0 == calculatedWidth) {
              var clone = this.form_field_jq.clone();
              clone.css({"left": 10000, "position": "fixed"});
              clone.appendTo('body');
              calculatedWidth = clone.outerWidth();
              clone.remove();
          }
          return "" + calculatedWidth + "px";

$ ('выбрать'). selected ({width: '100%'}); автор @pfiller работал у меня на сворачиваемой панели.

Спасибо

Как мне избавиться от класса selected-search, если я не могу загрузить ресурсы в каталог моего проекта?

Мне пришлось добавить тайм-аут при загрузке статических выборок из шаблона, который еще не был обработан. При попытке инициализации ничто в иерархии не имело показателей. Если заключить его в нулевой тайм-аут, инициализация, по крайней мере, переместится в конец очереди событий.

// Found this in chosen.jquery.js and patched it as follows
AbstractChosen = (function () {
    function AbstractChosen(form_field, options) {
        if (!AbstractChosen.browser_is_supported()) {
            return;
        }

        var self = this;
        window.setTimeout(function () {
            self.form_field = form_field;
            self.options = options != null ? options : {};
            self.is_multiple = self.form_field.multiple;
            self.set_default_text();
            self.set_default_values();
            self.setup();
            self.set_up_html();
            self.register_observers();
        }, 0);
    }

Меня только что укусил этот баг, 100% исправил проблему для меня.

@harvesthq , вы бы приняли запрос на

Надежный обходной путь для этого - использовать ng-if вместо ng-show. Работает отлично и просто.

Я понял, что ng-if - предпочтительный выбор во многих ситуациях. Не только восстановление сломанного ng-select, но и разрешение рекурсивных контроллеров (с использованием комбинации ng-if, ng-controller, ng-init и ng-template).

так что кажется, что эта 4-летняя проблема все еще не решена?!?!

+1

+1 пока что использую select2

Есть ли способ иметь счетчик в области, расширяющейся при нажатии на выбранный список выбора, это должно происходить, пока данные добавляются к выбранному jquery. Я обрабатываю огромное количество записей в выбранный jquery, и требуется время, чтобы их обработать и показать. ??

Что за эпическая 5-летняя ошибка ... и все еще кусает людей (ой!).

У Google есть аналогичная ошибка с их картой, которая не отображается должным образом в скрытом div. однако для обеих этих проблем есть простые в реализации обходные пути.

Да, я столкнулся с этой ошибкой карт Google когда-то в прошлом году, IIRC, но сколько людей потратили полдня на ругательства и пробовали разные вещи, прежде чем нашли этот отчет? Подобные ошибки в популярных библиотеках тратят часы времени. Если умножить количество людей, изучающих одну из этих библиотек каждый год, общие затраты, вероятно, ошеломляют ... Если они не собираются это исправлять, ничего страшного. Исправление на этом этапе может странно взаимодействовать с огромным количеством развернутых обходных решений, возможно ... В этом случае они должны признать, что не исправляют это, и задокументировать обходной путь где-нибудь на видном месте в документации, чтобы люди не изо всех сил пытались сделать (или пропустить) крайние сроки по этому материалу.

Мое «общее» исправление похоже на другие, и оно предполагает, что ширина всех выбранных мной элементов в разметке составляет 100% от их родительского div. Мы используем бутстрап, так что это как раз для нас.

Запустите этот код сразу после инициализации .chosen () при загрузке страницы.

`` ''
$ (". selected-container"). each (function (i, elem) {
if ($ (elem) .width () == 0) {
$ (elem) .width ("100%");
}
});
`` ''

Для тех из вас, у кого была проблема, когда элемент изначально находился внутри скрытого контейнера css, а затем, когда он стал видимым, имел ширину 0 пикселей - исправление, которое я нашел, заключалось в установке ширины в конфигурации js;

var config = { '.chosen-select' : {}, '.chosen-select-width' : {width:"95%"} } for (var selector in config) { $(selector).chosen(config[selector]); }

Затем я дал выбранным входам класс css selected-select-width

<select name="f01" class="chosen-select-width" id="item_select_staff">

Похоже, трюк сработал с выбранной версией v1.6.2 и jquery версии 3.1.1.

Я просто оставляю выбранную по умолчанию опцию ширины (авто) и добавляю

.chosen-container { min-width:5em; }

в CSS моего сайта (при необходимости регулируя минимальную ширину). Из-за этого он никогда не становится 0 пикселей (или слишком маленьким для использования), при этом по-прежнему подходя к идеальной ширине выбора, когда это возможно (принуждение к ширине 100% или что-то в этом роде не работает, когда у вас есть элементы выбора, встроенные в другой контент, и это решает основную проблему, а также позволяет использовать встроенные элементы выбора и, по-видимому, предлагает самую простую и понятную реализацию).

Как это все еще сломано спустя СЕМЬ лет?

Моя работа с бутстрапом 3 добавляет следующий стиль:

.chosen-container {
    min-width: 90%;
}

Моя работа с бутстрапом 3 добавляет следующий стиль:

.chosen-container {
    min-width: 90%;
}

Купите, тогда раскрывающийся список все еще не отображается .... @koenvanderlinden

это уже задокументировано
https://harvesthq.github.io/chosen/options.html
Отметьте опцию width и ее описание

@qbadev Хотя это приводит к тому, что размер элемента не соответствует размеру содержимого, когда это необходимо, поэтому я не вижу в этом исправления (особенно когда использование min-width дает лучший результат, чем этот).

Описание документации фактически просто указывает на ошибку (которая должна быть устранена) и упоминает ее использование в качестве потенциального обходного пути для ошибки.

@koenvanderlinden рекомендует min-width:90%; так что обычно это 90% ширины, которая увеличивается до 100% ширины, если этого требует содержимое select. Опять же, я по-прежнему выбираю min-width:5em; (точное значение em меняется в зависимости от варианта использования), поэтому оно никогда не бывает слишком маленьким, но все равно пытается расширяться, чтобы соответствовать содержимому выбора, а не изменению размера на основе родителя. элемент.

@KZeni Я не говорил, что это

Раньше я много раз сталкивался с такими проблемами, которые невозможно было вычислить, потому что ширина объекта была равна 0. Ее нельзя решить универсальным способом, так как каждое приложение отличается.
Поэтому, когда выбранный элемент виден в момент инициализации, никаких действий не требуется, но если он скрыт, можно использовать параметр width .

Поддержка нестандартной ширины
Использовать произвольную ширину с Chosen так же просто, как передать параметр при создании Chosen:
$(".chosen-select").chosen({width: "95%"});

https://harvesthq.github.io/chosen/

Я обнаружил эту проблему после обновления jQuery с версии 1. * до версии 3. *.
Решил, что:

selected.jquery.js: 543
AbstractChosen.prototype.container_width = function () {
return this.form_field.offsetWidth + "px";
->
return $(this.form_field).outerWidth() + "px";