Chosen: Выбранный получает «вырез», когда помещается в область с «переполнением: скрыто».

Это то же самое, что и выпуск №59.

Разве это не неизбежно, поскольку элемент-контейнер - это хорошо, «переполнение: скрыто», именно так работает CSS. Единственный способ обойти это - визуализировать раскрывающийся список за пределами контейнера, а затем использовать абсолютное позиционирование.

Да, я согласен с dfischer. Не похоже на проблему с избранным. По определению свойство переполнения указывает, что произойдет, если содержимое выходит за границы элемента. Если вы не хотите, чтобы _overflow_ был скрыт, измените это свойство.

Хотя это правда, я думаю, что это частый случай использования диалоговых окон. (Особенно диалог jquery)

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

Для этого вам _required_ нужно выполнить рендеринг вне контейнера, а затем использовать jQuery / JS magic для определения позиционирования относительно триггера.

Случай jQuery Dialog не зависит от элемента контейнера, поэтому он просто использует позиционирование на основе размеров центра и ширины диалога.

Это скорее проблема CSS, а не проблема Chosen. Не кладите на контейнер overflow: hidden. Вам придется использовать другую технику, чтобы очистить поплавки под ним, если вы это делаете.

Я просто написал код, который, как мне кажется, делает то, что вы ищете:

$ .fn.extend ({
selected: function (data, options) {
if ($ (this) .parent (). css ("overflow") == "hidden") {
// получаем смещения между родителем и потомком для вычисления разницы
// когда мы нажимаем на абсолютное
var y = $ (this) .offset (). top - $ (this) .parent (). offset (). top,
x = $ (this) .offset (). left - $ (this) .parent (). offset (). left,
$ t1 = $ ("<div />", {
css: {
"позиция": "относительная",
"высота": $ (this) .parent (). height,
"ширина": $ (это) .parent (). width
}
}),
$ t2 = $ ("<div />", {
css: {
"position": "absolute",
"верх": y,
"слева": x
}
});
$ t1.insertBefore ($ (это) .parent ());
$ (это) .parent (). appendTo ($ t1);
$ t2.appendTo ($ t1);
$ (это) .appendTo ($ t2);
}
return $ (this) .each (function (input_field) {
if (! ($ (this)). hasClass ("chzn-done")) {
вернуть новый Chosen (this, data, options);
}
});
}
});

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

Этот код эффективно выполняет следующие действия:

1. вычислить смещение между полем выбора и родителем.
2. создайте родительский div с теми же размерами, что и ваше переполнение, скрытым и установленным в относительный.
3. создайте родительский элемент для поля выбора, создав элемент как абсолютный, используя смещения x и y из шага 1.
4. вставить новый родительский элемент перед родительским элементом select, добавить div переполнения внутри нового родительского элемента, добавить этот новый родительский элемент select внутри основного родительского элемента, добавить выбранный элемент к новому дочернему родительскому элементу.

Интересная идея, Мэтью, но я думаю, что это не сработает в диалоге jQuery-UI, не так ли?

Скорее всего, выпадающий элемент (.chzn-drop) нужно вытащить из .chzn-контейнера в тело документа ...

Просто добавьте стиль на страницу, и ваш ответ положительный:

.ui-диалог { переполнение: видимый; }

У меня это не работает, так как я создаю свои страницы, используя div как столбцы (в отличие от td и таблиц).
Я использую « overflow: hidden », чтобы не допустить разрушения неконтролируемого содержимого соседних div.

Полагаю, многие из вас используют ту же структуру.

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

Пт, 29 июля 2011 г., 23:47, этаниэль
[email protected]
написал:

У меня это не работает, так как я создаю свои страницы, используя div как столбцы (в отличие от td и таблиц).
Я использую « overflow: hidden », чтобы не допустить разрушения неконтролируемого содержимого соседних div.

Полагаю, многие из вас используют ту же структуру.

Ответьте на это письмо напрямую или просмотрите его на GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -1681303

Прежде чем мы углубимся в этот разговор, я сделал теоретическое исправление. Это не может быть применено ко всем сценариям, потому что все, что нужно, - это один элемент, имеющий контр-атрибут, чтобы облажаться. Вышеупомянутое решение с видимым переполнением будет работать только с параметром диалогового окна изменяемого размера: false. Зачем вам нужно иметь переполнение выбора вне диалогового окна?

Хорошо, вот несколько снимков экрана, которые, надеюсь, прояснят проблему.

http://i.imgur.com/9ZY9O.png
http://i.imgur.com/c2PLo.png
http://i.imgur.com/1oqZ7.png
http://i.imgur.com/ZBrQj.png

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

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

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

Теоретически это можно сделать, но для этого потребуется совершенно другая система построения / позиционирования с помощью выбранного плагина. Это изменение будет обширным и потребует около 30% перезаписи текущего плагина. Я считаю это запросом функции, а не ошибкой. Все браузеры имеют рендеринг по умолчанию для выбранных элементов. Выбранный реплицирует его с помощью div, но не обрабатывается как элемент выбора.

Как я уже сказал, единственный способ сделать это - абсолютное позиционирование ВНЕ запускаемого элемента. Другого пути нет. Правильно на @medelbrock

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

@veloper : Я попробовал (как мог), и это, похоже, не помогло. Я также не вижу, как это будет работать, поскольку div.chzn-drop все еще содержится в диалоговом окне, поэтому будет обрезано независимо от того, позиционировано оно абсолютно или нет.

Единственный способ остановить это - вытащить div.chzn-drop из диалога и сделать его дочерним по отношению к <body> , но, как все указывают, это более серьезное изменение, чем кто-либо готов запачкать руки, пытаясь.

К сожалению, использование overflow:visible невозможно, при необходимости диалоговое окно должно быть прокручиваемым.

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

this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
});

к

var parent = this.dropdown.parent();
var offset = parent.offset();
dd_top = offset.top + parent.outerHeight();
dd_width = parent.width();
this.dropdown.css({
    "top": dd_top + "px",
    "left": offset.left,
    "width": dd_width + "px"
});

Я сам сталкиваюсь с этой проблемой, пытаясь заставить Chosen работать в диалоговом окне Wijmo / jQuery UI. Возможно, я здесь не в своей лиге, но разве нет довольно простого решения, чтобы в раскрывающейся части было «display: none», когда она скрыта, а затем «display: block», когда она отображается? Полосы прокрутки по-прежнему будут появляться при открытом раскрывающемся списке, но это, вероятно, лучше, чем постоянное присутствие полос прокрутки.

Исправление (проверено в Chrome 13, Firefox 7 и IE 9):

В selected.css:

.chzn-container .chzn-drop {
положение: фиксированное;
}

и в Chosen.prototype.results_show

вар смещение = this.container.offset ();
this.dropdown.css ({
"верх": (offset.top + dd_top) + "px",
"left": offset.left + "px",
"дисплей": "блок"
});

http://img30.imageshack.us/img30/4094/chosen3.png

Вот и все, хорошенько подумал @levushka. Решено сейчас в моей ветке: https://github.com/tompaton/chosen/commit/fda07051161f3fffe6049362b6c9b66ffbe857d1

Хорошо, это немного сложнее. Вышеупомянутое исправление не сработало, если страница была прокручена.

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

iOS 5 _может_ решить эту проблему, но iOS в настоящее время не поддерживает position: fixed так же, как это делают настольные браузеры. Chosen ужасно работает на рабочем столе, но это может ограничить его использование в плохо спроектированных мобильных браузерах ...

Я здесь не просто выбираю Apple, более старая версия Android также не поддерживает position: fixed.

Начиная с jQuery 1.7 (еще не выпущенного, но в кандидате на выпуск) у них есть встроенный тест для поддержки CSS Position Fixed:
http://bugs.jquery.com/ticket/6809

Возможно, стоит обнаружить jQuery 1.7 и использовать их результат или скопировать их код и получить отдельный результат в противном случае.

+1 для позиции в конце элемента body.

проверьте виджет jquery "автозаполнение". довольно хорошее решение этой проблемы:

http://jqueryui.com/demos/autocomplete/

кстати отличный плагин.

У меня была эта проблема в основном в браузерах webkit. IE просто сходит с ума с выбранным, поэтому я отключил его, если т.е. Используя jquery, я проверяю, является ли браузер браузером webkit, и регулирую переполнение div, содержащего мои выборы, следующим образом:

if($.browser.webkit) $(this).css("overflow",($(this).is(":visible"))?"visible":"hidden");

где это div, содержащий выборы.

+1 @levushka и @tompaton Не идеально, но достаточно хорошо. Едва :)

Решение @levushka отличное, но оно глобальное ... поэтому в window.top, когда вы прокручиваете вниз и щелкаете по выбранному, он скатывается в неправильном положении. Итак, вот решение для обычных страниц и всплывающих окон

в Chosen.prototype.results_show

заменять:

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

с:

if($('.popup').length!=0) {

  var offset = this.container.offset();
  this.dropdown.css({
    "top": (offset.top+dd_top) + "px",
    "left": offset.left + "px",
    "display": "block"
  });

} else {

  this.dropdown.css({
    "top": dd_top + "px",
    "left": 0
  });

}

CSS:

   .popup .chzn-container .chzn-drop { position:fixed; }

Если вы используете jQuery UI или что-то еще, у вас могут возникнуть проблемы с z-index, поэтому установите для выбранного z-index более высокие значения (jQuery UI - это 1010+)

Теперь он работает в FF и для Chrome вам нужно:

     .popup { overflow-x:visible; overflow-y:visible; }

Элементы lover могут иметь overlow: hidden без проблем.

Почему бы не отобразить раскрывающийся список в теле и использовать функцию позиционирования JQuery UI для позиционирования поля? http://jqueryui.com/demos/position/. Это стандартный метод, используемый для многих виджетов пользовательского интерфейса jquery.

$ (".czn-drop") .position ({
of: $ ("#container"),
мой: "левый верх",
at: "слева внизу",
});

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

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

.chzn-drop {
перелив: авто;
максимальная высота: 75 пикселей;
}

Может быть, это кому-то поможет.

Извините за довольно скучный вопрос / RTFM, но как я могу отобразить раскрывающийся список вне контейнера (скажем, на body )? Сейчас единственное, что мне приходит в голову, - это форкнуть плагин и засунуть в него этот фрагмент кода. Должен быть более элегантный способ добиться этого.

Есть ли событие, которое выбрано срабатывает, когда раскрывающийся список открывается / закрывается. Если это так, я могу просто изменить настройку переполнения родительских div-ов на видимую, а затем обратно. Я пробовал это с помощью:

$(".chzn-drop").show(0, function () { 
   $(this).parents("div").css("overflow", "visible");
});    

И да, это сработало. Но потом, когда я добавил:

$(".chzn-drop").hide(0, function () {
   $(this).parents("div").css("overflow", "");
});

Больше не работало. Я предполагаю, потому что у меня есть несколько выбранных элементов управления в форме. Если бы я мог добавить этот код в событие открытия / закрытия, я думаю, это доставило бы меня туда, куда я хочу.

Вы можете прослушивать liszt:showing_dropdown и liszt:hiding_dropdown отправленные в исходном элементе select

Отлично ... так что это решило мою проблему:

$ (". chzn-select"). on (" liszt: show_dropdown ", function () {
$ (это) .parents ("div"). css ("переполнение", "видимое");
});
$ (". chzn-select"). on (" liszt: hiding_dropdown ", function () {
$ (это) .parents ("div"). css ("переполнение", "");
});

Конечно, это может работать не со всеми макетами.

Спасибо ... БОБ

Я раздвоил код, чтобы сделать выпадающий дочерний элемент <body/> . Я еще не тестировал его достаточно, но здесь он отлично работает -> https://github.com/gil/chosen

Вы можете увидеть, решит ли это вашу проблему, @tompaton? Думаю, теперь мне просто нужно обнаружить прокрутку, чтобы исправить положение вручную.

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

@geoffweatherall Правда? Хороший! : D По поводу проблемы с множественным выбором, что перестало работать? Не могли бы вы попробовать файл example.jquery.html и сказать мне, не работает ли он? Для меня это нормально.

Да, примеры работают нормально (FF 12).

Единственный пример выбора находится на довольно простой странице html с «панелями», которые используют скрытое переполнение. Однако пример множественного выбора находится в «диалоге», созданном с использованием colorbox (http://www.jacklmoore.com/colorbox) - не спрашивайте меня, почему, когда я приехал, проект был таким. Я предполагаю, что это может иметь какое-то отношение к этому, я разберусь с этим.

Вилка устраняет проблему отсечения в ряде мест в нашем приложении, включая множественный выбор, который не вложен в цветные поля (http://www.jacklmoore.com/colorbox). Я считаю, что проблема с цветовой коробкой не по вине выбранного. Отличная вилка :-)

На самом деле я обнаружил проблему с вилкой, которая отображается на странице примера (example.jquery.html). Для элемента управления с множественным выбором, если вы щелкните элемент управления, чтобы открыть список параметров, а затем использовать клавиши со стрелками вверх и вниз для навигации по списку, список параметров неожиданно переместится в верхнюю часть страницы. Эта проблема не возникает для одиночного выбора. Протестировано в FF12, Chrome 18 и IE8.

@geoffweatherall Возможно, проблема с окном цвета заключается в том, что он отображается в раскрывающемся списке «Выбрано». Попробуйте что-нибудь подобное, чтобы узнать, поможет ли это:

.chzn-drop {
    z-index: 999999 !important;
}

Или попробуйте установить непрозрачность палитры на 0,1, чтобы проверить, видите ли вы раскрывающийся список под полем палитры.

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

Хорошо, я попробовал это, и я увидел выпадающие списки, но положение неправильное. Они немного опускаются ниже текстового поля. Вот цзин, показывающее поведение. http://screencast.com/t/c4PCIHC176RX

Привет, Гил,

Я пробовал вашу версию, и она работает! Большое спасибо!
Только одна мелочь перестала работать ... Это опция disable_search_threshold. Поле поиска не исчезнет.

Есть идеи?

Спасибо!

Забудь! Однако мне удалось исправить это сам ... возможно, вам стоит также изменить это в коде:

Изменять:

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.container.addClass("chzn-container-single-nosearch");
    } else {
      this.container.removeClass("chzn-container-single-nosearch");
    }

К

    if (this.form_field.options.length <= this.disable_search_threshold) {
      this.dropdown.addClass("chzn-container-single-nosearch");
    } else {
      this.dropdown.removeClass("chzn-container-single-nosearch");
    }

Какой статус у этой вилки? Он был объединен с мастером? Или все еще в стадии тестирования?

Еще одна проблема ... вилка, похоже, работает для меня, но в firefox я вижу раскрывающийся div внизу страницы. Кажется, что отрицательное левое положение не выводит его из области отображения. Возможно, это связано с какими-то другими стилями, которые я ... подумал. Есть идеи? Почему для него не установлено значение «Нет»?

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

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

7 июня 2012 г., 6:44, Боб Арчер
[email protected]
написал:

Еще одна проблема ... вилка, похоже, работает для меня, но в firefox я вижу раскрывающийся div внизу страницы. Кажется, что отрицательное левое положение не выводит его из области отображения. Возможно, это связано с какими-то другими стилями, которые я ... подумал. Есть идеи? Почему для него не установлено значение «Нет»?

---

Ответьте на это письмо напрямую или просмотрите его на GitHub:
https://github.com/harvesthq/chosen/issues/86#issuecomment -6162299

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

в Chosen.prototype.results_show:

      this.dropdown.css({
        "top": dd_top + "px",
        "left": 0,
        "display": "block"
      });

В Chosen.prototype.results_hide:

      this.dropdown.css({
        "left": "-9000px",
        "display": "none"
      });

в selected.css:

.chzn-container .chzn-drop {
  position: static;
  display: none;
}

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

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

Привет, ребята! Приятно осознавать, что моя вилка помогает некоторым людям с этой проблемой ... :)

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

@geoffweatherall Я исправил код кое-чем, что, как мне кажется, поможет вам с проблемой клавиатуры. Подскажите пожалуйста, работает ли! ;)

@PilotBob У тебя все еще проблема из-за этого цзин? Что касается другой проблемы, я протестировал example.jquery.html в Firefox 12, и, похоже, все в порядке. Может быть, вы можете попробовать заменить все найденные left:-9000px на display:none . Я недостаточно хорошо знаю код, чтобы сказать вам, но поскольку я устанавливаю display:block на results_show() , это может вам помочь.

@pruimmartin Спасибо за исправление и извините за то, что не ответили слишком долго. Я уже добавил исправление в свой код!

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

@PilotBob Я рассматриваю этот проект: https://github.com/ivaynberg/select2
У них такая же проблема с переполнением, но я думаю, что они планируют изменить в версии 3.

@gil - ваше решение отлично работает, но при ширине li.search-field остается фиксированной на 25px . Другими словами, когда я загружаю ваш пример страницы, меню красиво добавляются к элементу body , но текст-заполнитель и любой ввод ограничиваются шириной 25px . На самом деле, похоже, что метода search_field_scale вообще нет. Я что-то упустил?

@rreusser Я удалил метод search_field_scale , так как он использовался только для множественного выбора и для правильного расчета позиции. Для этой вилки в этом больше не было необходимости. Какой браузер / версию / ОС вы тестируете? Для меня размер поля поиска правильный: example.jquery.html .

@rreusser Привет, прости. Теперь я понимаю, в чем дело. Попробую исправить сегодня позже.

Нет проблем, @gil! Спасибо за быстрый ответ! Мне нужно еще немного поэкспериментировать, но также может быть полезно разрешить прикрепление к произвольному элементу - что, я думаю, тоже должно быть довольно тривиально. У меня есть поле выбора внутри прокручиваемого div, и хотя ваше решение предотвращает обрезку, меню не перемещается вместе с div при прокрутке. Я думаю, что все, что нужно, - это где-то один дополнительный div, но с этим нужно немного повозиться.

@rreusser Я способом . Не могли бы вы попробовать еще раз и сказать, сработает ли это для вас?

Что касается присоединения к другому элементу, я думал о том, чтобы сделать его настраиваемым. Но вы можете решить проблему с прокруткой с помощью небольшой конфигурации. Если ваш <select /> не является прямым потомком вашего прокручиваемого div, попробуйте следующее:

$(".your-select").chosen({
    overflow_container: $(".scrolling-div")
});

Но если родительским узлом <select /> был ваш <div /> , в этом нет необходимости.

@gil , этот форк слить на master? Или все еще в стадии тестирования? У меня также была проблема с элементами управления клавиатурой в вилке, клавиша со стрелкой вниз не запускает методы results_show или results_toggle. Спасибо :-)

@myfriendtodd Я еще не знаю, может быть, я смогу отправить Pull Request, когда все сочтут его стабильным. Но я все еще думаю, что это требует дополнительных испытаний. Я постараюсь исправить проблемы с клавиатурой в эти выходные. Спасибо!

@myfriendtodd Привет, я думаю, что исправил. Не могли бы вы протестировать это на своем проекте? ;)

спасибо @gil расскажу, как это получается. Спасибо за всю вашу помощь :-)

@gil Большое спасибо за вилку. Исправление у меня прекрасно сработало - круто!

Тем не менее, я использую Kickstrap, чтобы стилизовать Chosen под Twitter Bootstrap. Это приводит к тому, что Chosen с этим исправлением очень плохо работает - содержимое раскрывающегося списка отображается внизу страницы без стиля - https://skitch.com/dyad/euys2/login . Насколько я знаю, все, что делает Kickstrap, перезаписывает стили Chosen по умолчанию.

Файл LESS для изменений, внесенных в стиль, можно найти по адресу https://github.com/ajkochanowicz/Kickstrap/blob/master/extras/chosen/chosen.less - есть ли что-нибудь очевидное, что ваши исправления редактируют, что объясняет, почему это может происходить?

Большое спасибо.

Привет, ребята,

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

https://github.com/gil/chosen/tree/new_version

@conatus Не могли бы вы попробовать и эту версию? В последней версии в ветке "master" было много изменений в файле css, в этой версии - всего 3 строки. Измените их на Chosen css Kickstrap:

• Строка 4: изменение с "position: relative;" в "position: static;".
• Строка 13 изменилась с "position: absolute;" в "положение: фиксировано;".
• В строке 128 вставьте новую строку «display: none;» под «left: -9000px;».

Надеюсь, это сработает! ;)

Кроме того, эта новая версия синхронизирована с основной веткой gatherhq!

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

@gil - Я тестирую вашу версию, и, хотя она отлично работает, есть небольшая проблема: когда выбранный элемент помещается внутри элемента с фиксированной позицией, прокрутка страницы сместит раскрывающийся список. На самом деле это проблема и с автозаполнением jQuery.

Я могу придумать только два возможных решения этого:
1) Если выбранный элемент находится внутри фиксированного элемента, раскрывающийся список должен быть помещен внутри chzn-контейнера и ему также должно быть присвоено фиксированное положение. Верхнее положение должно рассчитываться по фиксированному положению контейнера.
2) Пересчитайте положение раскрывающегося списка при прокрутке

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

@ragulka @ChiperSoft Я вижу проблему ... Просто чтобы убедиться, воспроизводит ли этот jsfiddle то, что вы, ребята, говорите? http://jsfiddle.net/QY256/

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

Я думал о том, чтобы закрыть Chosen, когда что-то прокручивается, поскольку обработка прокрутки вызывает некоторые другие незначительные проблемы (например, когда ваш <select /> виден только наполовину).

@ragulka @ChiperSoft Также, в качестве временного исправления, можете ли вы, ребята, попробовать изменить строку 640 внутри метода update_position из:

"top": (offset.top + dd_top) + "px",

к:

"top": (offset.top + dd_top - $(window).scrollTop()) + "px", ?

@gil Да и нет - предоставленный вами jsfiddle показывает проблему, но для меня она появилась, когда я прокручивал тело (у моего фиксированного элемента не было полос прокрутки). В вашем jsfiddle проблема, похоже, возникает, когда я прокручиваю содержимое фиксированного элемента, но не при прокрутке тела.

@ragulka Я знаю, что это не лучшее решение, но я думаю, что исправил его здесь. Вы можете попробовать? Внесите изменения в строку 640, как я сказал, и примените Chosen следующим образом:

$(".your-select").chosen({
    overflow_container: $(".your-fixed-div").add( document )
});

Это должно обрабатывать прокрутку на div и на document и фиксировать позицию.

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

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

Большое спасибо за это.

За прошедшее время Kickstrap обновился - https://github.com/ajkochanowicz/Kickstrap/blob/beta/assets/Kickstrap/apps/chosen/chosen.css. Ваша новая ветка работает прекрасно, однако изменения, которые вы предлагаете в CSS Kickstrap, похоже, не действуют. Что происходит, так это то, что раскрывающийся список больше не появляется. Любые идеи? Большое спасибо.

Спасибо @gil !!! Ваша ветка (https://github.com/gil/chosen/tree/new_version) устранила мою проблему с этой конкретной проблемой.

Спасибо за все советы. Я внес некоторые небольшие изменения в предложения выше, чтобы раскрывающиеся списки работали с модальными окнами Bootstrap v2.1.1 и Chosen v0.9.11. Небольшие изменения были необходимы, чтобы правильно расположить .chzn-drop после того, как он был повторно открыт после прокрутки страницы.

Надеюсь, это поможет другим.

CSS

.modal .chzn-container .chzn-drop {
  position:fixed;
}

Javascript

Chosen.prototype.results_show = function() {

      var self = this;

      // hide .chzn-drop when the window resizes else it will stay fixed with previous top and left coordinates
      $(window).resize(function() {
        self.results_hide();
      });

      var dd_top;
      if (!this.is_multiple) {
        this.selected_item.addClass("chzn-single-with-drop");
        if (this.result_single_selected) {
          this.result_do_highlight(this.result_single_selected);
        }
      } else if (this.max_selected_options <= this.choices) {
        this.form_field_jq.trigger("liszt:maxselected", {
          chosen: this
        });
        return false;
      }
      dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
      this.form_field_jq.trigger("liszt:showing_dropdown", {
        chosen: this
      });

      if($('.modal.in').length) {
        // when in a modal get the scroll distance and apply to top of .chzn-drop
        var offset = this.container.offset();
        var scrolly = parseInt($(window).scrollTop(), 10);
        scrolly = scrolly < 0 ? 0 : scrolly;
        var toppy = offset.top+ dd_top - scrolly;
        this.dropdown.css({
          "top": toppy + "px",
          "left": offset.left + "px"
        });
      } else {
        // proceed as normal
        this.dropdown.css({
          "top": dd_top + "px",
          "left": 0
        });
      }

      this.results_showing = true;
      this.search_field.focus();
      this.search_field.val(this.search_field.val());
      return this.winnow_results();
    };

Итак, я немного поигрался с Chosen 0.9.11 и определил изменения, которые мне нужно было сделать в Chosen ...

Я использую Chosen внутри сильно измененного диалога jQueryUI, который можно перетаскивать и имеет максимальную высоту с переполнением: прокрутка.

Чтобы Chosen вел себя так, как я хочу, я изменил ".chzn-container .chzn-drop" на " position: fixed " и добавил " display: none ". Затем в «Chosen.prototype.results_hide» я добавил « display: none » в «this.dropdown.css» ...

this.dropdown.css({
    "left": "-9000px",
    "display": "none"
});

И в «Chosen.prototype.results_show» я заменил содержимое «this.dropdown.css» на « display: block ».
Чтобы получить правильное положение div .chzn-drop, я добавил функцию положения jQueryUI.

this.dropdown.css({
    "display": "block"
}).position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

В "Chosen.prototype.search_field_scale" изменить ...

return this.dropdown.css({
    "top": dd_top + "px"
});

... к ...

return this.dropdown.position({ my: 'left top-1', at: 'left bottom', of: this.container, collision: 'fit',  });

Теперь у меня осталась только одна проблема:

Мне нужно прослушивать события перетаскивания диалогового окна пользовательского интерфейса jQuery, чтобы закрыть выбранное перетаскивание, когда кто-то начинает перемещать диалоговое окно вокруг. Я уже добился этого, но код довольно грязный :-)

Есть ли шанс, что нетривиальное исправление из этой ветки https://github.com/gil/chosen/commit/new_version будет перенесено на GWTChosen?
GWTChosen потрясающий. Однако в настоящее время он вообще не может использоваться с LayoutPanels.

Как насчет добавления новой функции в библиотеку Chosen, где список будет отображаться над текстовым полем просто путем добавления другого или нового класса? Таким образом, скрипту не нужно отображать список за пределами обертки overflow: hidden div, и он, вероятно, решит большинство проблем, которые есть у других. PS: Я не рассматриваю это как проблему, поскольку переполнение: скрытый делает именно то, что должен делать. Лучше иметь особенность. Спасибо.

+1 На предложение Кликерко.

Так же, как @sillysachin, я использую GWTChosen, и у меня такая же проблема с LayoutPanels, overflow: hidden и ChosenListBox: /

Кто-нибудь знает, как исправить это? @sillysachin Вы что-то придумали с тех пор, как разместили здесь?

Tnx заранее :)

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

Этот коммит в https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983 исправляет его достаточно хорошо. Это относительно актуально, но я сделал это только для jQuery.

@robmcguinness Мне пришлось его немного изменить, чтобы он работал. Однако это создает ошибку. где вы не можете закрыть выпадающий список.

 Chosen.prototype.results_show = function() {

 this.dropdown.css({
      "display": 'block'
    });

  var dd_top;
  $(window).resize(function() {
    this.results_hide();
  });

  if (this.is_multiple && this.max_selected_options <= this.choices_count()) {
    this.form_field_jq.trigger("chosen:maxselected", {
      chosen: this
    });
    return false;
  }

  dd_top = this.is_multiple ? this.container.height() : this.container.height() - 1;
  this.container.addClass("chosen-with-drop");
  this.form_field_jq.trigger("chosen:showing_dropdown", {
    chosen: this
  });

  if($('.modal.in').length) {
    // when in a modal get the scroll distance and apply to top of .chzn-drop
    var offset = this.container.offset();
    var scrolly = parseInt($(window).scrollTop(), 10);
    scrolly = scrolly < 0 ? 0 : scrolly;
    var toppy = offset.top+ dd_top - scrolly;
    this.dropdown.css({"top": toppy + "px","left": offset.left + "px"});
  } else {
    // proceed as normal
    this.dropdown.css({
      "top": dd_top + "px",
      "left": 0
    });
  }




  this.results_showing = true;
  this.search_field.focus();
  this.search_field.val(this.search_field.val());
  return this.winnow_results();
};


Chosen.prototype.results_hide = function() {
  if (this.results_showing) {

    this.dropdown.css({
      "display": 'none'
    });

    this.result_clear_highlight();
    this.container.removeClass("chosen-with-drop");
    this.form_field_jq.trigger("chosen:hiding_dropdown", {
      chosen: this
    });
  }
  return this.results_showing = false;
};

и мне пришлось добавить ширину в CSS, иначе это будет 100% ширины сайта.

.modal .chosen-container .chosen-drop {
положение: фиксированное;
ширина: 300 пикселей;
}

Мне удалось исправить проблемы с помощью приведенного выше кода. Совместима с версией 1. Однако моя - это скорее приспособление для работы. но пока все работает правильно. Последняя проблема, которую я вижу, - это изменение размера браузера, текущий мод не работает.

Кто-нибудь знает, будут ли какие-либо из возможных исправлений этой проблемы в ближайшее время объединены в основную ветку? Для меня это препятствие = /.

Мы перешли к использованию Select2 ... у него тоже есть больше возможностей.

В четверг, 19 декабря 2013 г., в 11:24, Даниэль Хоффманн Бернардес <
[email protected]> написал:

Кто-нибудь знает, будет ли какое-либо из возможных исправлений этой проблемы
скоро слить с основной веткой? Для меня это препятствие = /.

-
Ответьте на это письмо напрямую или просмотрите его на Gi tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30942420
.

Спасибо PilotBob, выбрано больше не поддерживается? В таком случае вы можете обновить документацию.

Это не мой проект. Я "был" его пользователем. Из-за нескольких проблем мы обнаружили
альтернатива.

В четверг, 19 декабря 2013 г., 11:53, Даниэль Хоффманн Бернардес <
[email protected]> написал:

Спасибо PilotBob, выбрано больше не поддерживается? Если да, возможно, вы захотите
обновить документацию.

-
Ответьте на это письмо напрямую или просмотрите его на Gi tHubhttps: //github.com/harvesthq/chosen/issues/86#issuecomment -30945150
.

@DanielHoffmann Chosen все еще активно поддерживается. Select2 изначально был форком Chosen, но с тех пор ушел достаточно далеко, так что это отдельная вещь.

Chosen намеренно сделан простым - он был задуман как замена для select s, поэтому он позволяет избежать множества сложных функций и конфигураций. Select2 пошел по противоположному пути и добавил много-много функций и конфигураций - вам решать, какую из этих философий вы цените больше.

Что касается этой конкретной_ проблемы, то, к сожалению, это всего лишь проблема, а не решение. Если кто-то отправит запрос на перенос, чтобы исправить это, он будет рассмотрен для слияния. Однако OSS не является основной работой любого из сопровождающих - они работают над этим, когда могут, на своей постоянной работе. Итак, как всегда, запрос на включение принят, если вы хотите попробовать исправить это самостоятельно!

когда эта проблема будет исправлена? он такой старый, но критически важный для многих проектов! пожалуйста, обратитесь к нему как можно скорее!

Благодарность!

В выбранных форках много исправлений, так почему бы не использовать одно из этих исправлений?

@domnulnopcea Никогда не было никакого PR, отправляющего исправление для этого, только дублированные отчеты. Если у вас есть идея исправить это, пришлите PR. Затем мы рассмотрим его. В настоящее время я не знаю ни одной вилки, исправляющей эту конкретную проблему.

У меня есть исправление, это не чистый форк, он похоронен в другом репозитории и только в версии jQuery. (Нет, я не горжусь собой)

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

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

https://gist.github.com/msaspence/11032254

@stof а https://github.com/tompaton/chosen?

совершить: https://github.com/tompaton/chosen/commit/3d9be332de23bfe69d53c7640e829e879e084983

@domnulnopcea это никогда не было отправлено для включения в саму Chosen AFAIK. Мы вообще не можем заглядывать в вилки, чтобы изучить всю проделанную на ней работу. Мы работаем над Chosen в свободное время, поэтому мы не можем тратить недели на изучение тысяч коммитов во многих репозиториях, чтобы увидеть, что они делают.

@stof мы очень ценим вашу работу. Я использую его в своем собственном проекте (www.ubirimi.com). Но теперь, когда я дал вам ссылку на коммит, не могли бы вы изучить эти изменения и применить их к официальному выбранному репозиторию?

большое спасибо

Учитывая, что его нельзя применить напрямую (код сильно изменился за 11 месяцев), потребуется некоторое время (а также потребуется его тестирование, чтобы убедиться, что он работает правильно). Так что я не могу сделать это сейчас

@stof спасибо, что подумал об этом! Я ценю это!

@domnulnopcea, если для вас это так важно, почему бы вам не просмотреть изменения и не создать запрос на

@msaspence Я бы хотел, но я не фронтенд-разработчик! Я не очень привык к JS и прочим вещам на стороне клиента.

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

Я думаю, что на данном этапе все перешли на Select2 - есть ли преимущества в использовании Chosen?

У меня отлично сработало решение PilotBob!

Я добавил это в свой код:

$ (документ) .ready (функция () {
$ (". chzn-select"). on (" liszt: show_dropdown ", function () {
$ (это) .parents ("div"). css ("переполнение", "видимое");
});
}

Спасибо большое!!!

Проблема в том, что позиция списка опций - absolute , она не расширяет родительский контейнер. Решение, которое я предлагаю, - изменить его на float: left | right потому что оно может расширить родительский объект, если после того, как я добавлю объект DOM с clear:both

Я решил это (используется с диалоговым окном jquery-ui) следующим образом в моем css:

#clone-budget-dialog {overflow: visible;}

@grduggan вы можете предложить решение в css библиотеки?
Думаю, что ваше решение верное. Сделайте push-запрос!
+1

Никогда раньше этого не делал. Придется расследовать. Было бы неплохо, если бы в css.

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

перелив: видимый; на контейнере div работал у меня! Спасибо.

вам не всегда нужно переполнение: скрыто, когда вы используете поплавки, вы также можете очистить поплавки, используя это в своем родителе (удалите переполнение: скрыто):

&:перед,
&:после {
содержание: " "; // 1
дисплей: таблица; // 2
}
&:после {
ясно: оба;
}

вот как класс clearfix работает в начальной загрузке

Я изменил CSS (см. Ниже). Похоже, мой сценарий сработал.

.chosen-container .chosen-drop {
положение: относительное; / _Изменено с абсолютного, чтобы избежать отключения переполнения в контейнере_ /
верх: 100%;
слева: -9999 пикселей;
z-индекс: 1010;
ширина: 100%;
граница: 1px solid #aaa;
граница-верх: 0;
фон: #fff;
box-shadow: 0px 4px 5px rgba (0,0,0,0.15);
}

.chosen-container .chosen-results {
цвет: # 444;
положение: относительное;
переполнение-x: скрыто;
переполнение-у: авто;
маржа: 0 4px 4px 0;
отступ: 0 0 0 4 пикселя;
максимальная высота: 200 пикселей; / _Изменено с 240 пикселей_ /
-webkit-overflow-scrolling: сенсорный;

/*Added to clearfix because we changed the chosen-drop to a relative position*/
&:before,
&:after {
    content: " "; // 1
    display: table; // 2
}
&:after {
    clear: both;
}

}

Оборачивание выделенного (и выбранного) в элемент fieldset также может привести к нежелательным эффектам в браузерах webkit (т. Е. Вырезание, когда у родителя есть overflow: hidden ).
Это связано с тем, что по умолчанию webkit добавляет min-width: -webkit-min-content; в наборы полей.

Это решило проблему для меня:

fieldset { min-width: 0; }

@chassq хм, ваше решение у меня не работает ... см. этот снимок экрана:

У меня есть div вокруг выбранных выборок с помощью

  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;

Спасибо всем, что уже дали решение с position: fixed

Вот jsfiddle с решением (перезаписывает выбранные классы CSS):
http://jsfiddle.net/jwbL8utx/1/;)

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

http://jsfiddle.net/jwbL8utx/2/

Вот как я это решил:

http://jsfiddle.net/0w4a4dq5/1/

Это исправление не требует от вас изменения каких-либо других элементов, кроме самого выбранного меню. Вы заметите, что меню снова скрывается, если вы «отмените наведение», но это соответствует моим требованиям. Если вы хотите, чтобы он всегда был наверху, вы можете привязать событие прокрутки к вашему контейнеру div и вызвать событие selected: close.chosen .

@typologist Спасибо за отличное решение.
В вашем JS есть две незначительные ошибки, которые я хотел бы упомянуть:
В строке 51 должно быть

'top': y - $(document).scrollTop()

в противном случае всплывающее окно может быть смещено при определенных условиях

В строке 23 вместо использования

$('.chosen-container')

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

$chosenSelect.next('.chosen-container')

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

подскажите пожалуйста, есть ли какое-нибудь решение для Chosen v1.4.2?

.chosen-container.chosen-with-drop .chosen-drop {
    position: relative;
}

overflow-y: visible

Добавьте это в родительский div, содержащий макет. В моем случае это был sub div модального диалога, который имел _overflow-y: auto_, и замена его на _overflow-y: visible_ сработала для меня.

Есть ли решение этой проблемы?

У этого проекта есть ваш ответ:
http://jsbin.com/finufihaji/edit?html

Немного поискать и провести тесты - самое простое решение.

Мне пришлось переопределить .chosen-drop и .chosen-results и установить фиксированную высоту для обоих, чтобы все параметры были доступны для выбора и не зависели от директивы переполнения родительского div

По крайней мере, это работает для меня, и в большинстве выбранных мной областей есть только 3 или 4 варианта. Только 1 (та, что скрыта) имеет около 12 и может вырасти в ближайшем будущем.

Я применил следующее к родительскому div, у которого было переполнение: скрытый

.profile-content { /* Hack to stop profile-content from cropping Chosen dropdown */ padding-bottom: 100px; margin-bottom: -100px; }

Источник: Stack Overflow

@doowruc Отличный хак!

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

.ui-dialog-content{
    overflow:visible !important;
 }

Работал у меня.

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

https://jsfiddle.net/phil_ayres/gvn8bkaL/

https://github.com/R1p8p8e8r/chosen
Думаю мое решение тебе поможет