выбранный заполнитель данных не отображается полностью для списков

У меня есть список asp.net, и я использую выбранный плагин jquery. Значение data-placeholder не всегда работает со списками. Например, см. изображение:

введите здесь описание изображения

Обратите внимание на окно списка для Region, в нем написано «Выбрать повторно», затем оно останавливается ... его довольно случайный взгляд на окно списка для города, который работает нормально. Но посмотрите на поле со списком для страны, в которой должно быть указано Select Country..., но отображается Select Country.. (отсутствует последний период). Разметка asp.net моего элемента управления списком выглядит так:

<asp:ListBox ID="lbRegion" AutoPostBack="true" runat="server" class="chosen-select"
             data-placeholder="Select Region..." SelectionMode="Multiple"
             OnSelectedIndexChanged="lbRegion_OnSelectedIndexChanged" ToolTip="Select Region...">
</asp:ListBox>

Я пытался воссоздать его и т. д., но безрезультатно. Что дает?

Вот мой jquery, который включает класс для выбранного:

$(".chosen-select").chosen({
            search_contains: true,
            no_results_text: "Oops, nothing found!",
            allow_single_deselect: true
        });
        $('.chosen-container').css('width', '200px');

jquery asp.net jquery-chosen
person JonH    schedule 15.01.2014    source источник
comment
просто любопытно, почему режим выбора региона множественный?   -  person Charles380    schedule 15.01.2014
comment
Потому что это список с множественным выбором (более 1 значения).   -  person JonH    schedule 15.01.2014
comment
Не могли бы вы дать ссылку на скрипку или живую страницу с этой проблемой?   -  person Pez Cuckow    schedule 18.01.2014
comment
Здесь отлично работает jsfiddle.net/IrvinDominin/B4X8k; Вы можете предоставить больше контекста? Открывается во всплывающем окне? В каком браузере вы столкнулись с проблемой? Вы используете последний выбранный (1.0)?   -  person Irvin Dominin    schedule 20.01.2014
comment
Я также сталкиваюсь с той же проблемой... Но как только я нажимаю на нее, значение заполнителя отображается нормально.   -  person Santosh Ghimire    schedule 20.01.2014
comment
@IrvinDomininakaEdward Я знаю, что asp.net переводится в обычную разметку, однако между моим кодом и вашим могут быть некоторые различия. Можете ли вы попробовать это в списках asp.net, как я показал в своем примере, попробовать несколько из них и сообщить, если у вас возникнет та же проблема?   -  person JonH    schedule 20.01.2014
comment
@SantoshGhimire - Мы также сталкиваемся с той же проблемой: щелчок по списку и удаление от него решает проблему, однако это не идеально. Также Ирвин Доминин, также известный как Эдвард, - интересно, есть ли разница, но эти списки находятся на панели обновления asp.net ... Можете ли вы попробовать это?   -  person JonH    schedule 20.01.2014
comment
Разве это не просто проблема CSS?   -  person PHearst    schedule 20.01.2014
comment
@Phearst - как так? Ширина контейнера больше, чем текст, помещаемый в заполнитель данных.   -  person JonH    schedule 21.01.2014
comment
@JonH Взгляните на эту проблему github.com/harvesthq/chosen/issues/1162   -  person Irvin Dominin    schedule 21.01.2014
comment
Я только что испытал что-то подобное раньше. Покажите мне еще немного кода, и тогда, возможно, я смогу его исправить.   -  person PHearst    schedule 21.01.2014

Ответы (4)


arrow_upward
10
arrow_downward

Проблема с Select Country.. воспроизведена здесь: http://jsfiddle.net/D3FUc/, я буду глубоко искать причину проблемы.

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

li.search-field {
    width: 100%;
}
li.search-field input.default {
    width: auto !important;
}

Проблема: https://github.com/harvesthq/chosen/issues/1162#issuecomment-30229366

Демонстрация: http://jsfiddle.net/D3FUc/1/

person Irvin Dominin    schedule 21.01.2014
comment
Привет, Ирвин, еще одна вещь, которую я заметил, это то, что все списки, кажется, получают класс default, поэтому это можно легко решить с помощью jquery, используя свойство css. $(".default").css("width", "175px"); - person JonH; 21.01.2014
comment
@JonH Да, это второе решение в CSS-коде, вставленном li.search-field input.default; Я думаю, что лучше использовать чистый css (без накладных расходов и всегда применяется по умолчанию), и будет лучше попытаться использовать более строгий селектор, потому что выбранный .default это немного грустно как имя класса - person Irvin Dominin; 23.01.2014
comment
Это был ответ для меня, хотя я изменил width: auto !important; на width: 100% !important - person doz87; 09.09.2016

arrow_upward
3
arrow_downward

Я заметил, что каждому списку на странице присвоен класс default. Я не говорю, что это определенный ответ, но это обходной путь. Просто добавьте это в свой jquery:

$(".default").css("width", "175px");

Используйте ширину по своему вкусу, в данном случае я использовал 175 пикселей.

person JonH    schedule 21.01.2014
comment
Вы можете сузить селектор - .chosen-choices .search-field .default, чтобы случайно не изменить что-либо еще на странице, поскольку .default довольно общий. - person Luke Shaheen; 22.04.2014

arrow_upward
1
arrow_downward

Явная установка ширины в параметрах инициализации, по-видимому, решает проблему в примере Ирвина:

$('.chosen-select').chosen({ width: '200px' });

мы сделали это, но используя стиль css. - ДжонХ

Я знаю.

Каким-то образом chosen вычисляет длину для метки-заполнителя и присваивает ее в разметке метки, в атрибуте style.
Я не могу сказать, в какой момент внутреннего рендеринга эта длина вычисляется, но из того, что показывает тест :

  • если у вас есть только правило css, длина неверна для первого отображения,
  • с другой стороны, если вы передаете ширину как явную опцию, длина будет правильной.

Мое слепое предположение: ширина выбранного заполнителя считывается в точке, где она еще не достигла своего окончательного значения - возможно, до того, как она была вставлена ​​в свое последнее место в DOM и, следовательно, до применения правила css.

person LeGEC    schedule 22.01.2014
comment
Только на этом я обнаружил, что это не работает для процентных значений ширины. например $('.chosen-select').chosen({ width: '95%' }); вызвал ту же проблему с усечением. - person Aaron; 22.01.2016

arrow_upward
0
arrow_downward

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

//to fix placeholder in chosen
$('select').trigger('chosen:updated')
person ykay says Reinstate Monica    schedule 17.11.2016