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

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

Обратите внимание на поле списка Region, в котором говорится: "Выберите" Re ", затем он останавливается... его довольно случайный взгляд на список для города, который отлично работает. Но посмотрите на окно списка для страны, которое должно сказать 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');

Ответы

Ответ 1

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

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

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

Ответ 2

Проблема о 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/

Ответ 3

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

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

документация
скрипка (работает с FF 26.0)

мы сделали это, но использовали стиль css. - JonH

Я знаю.

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

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

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

Ответ 4

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

//to fix placeholder in chosen
$('select').trigger('chosen:updated')