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

Я использую загрузку Twitter и фантастический плагин Select2.

Они отлично работают, я понял, что вам нужно установить {width: 'resolve'} при запуске Select2, иначе он выглядит испорченным!

Но у меня есть проблема с одним из моих вариантов, как вы можете видеть на изображении ниже, Referee Type select имеет неправильную ширину.

Это вызвано тем, что это поле изначально скрыто и становится видимым только в том случае, если рефери выбран в поле "Группа".

Итак, как я могу это исправить?

Inputs

Ответы

Ответ 1

Вы можете установить ширину в элементе <select> следующим образом:

<select style="width:260px">

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

Однако, если вы намерены избегать встроенных стилей, вы всегда можете просто переопределить select2 CSS и нацелить результирующий контейнер.

.select2-container {
  width: 260px;
}

Ответ 2

Выбор 2 достаточно умен, чтобы пересчитать его размер, если только вы установите его в теге выбора. вот так

<select style="width: 100%"></select>

CSS форматирование на классах не будет работать!

Подробнее читайте в разделе " Адаптивный дизайн - Процентная ширина "

Ответ 3

Вместо вызова select2() по типу рефери при загрузке страницы вызовите select2 после отображения типа рефери в первый раз. Таким образом, выбор будет видимым (с надлежащей шириной), и опция 'width': 'resolve' должна работать. Если вы предоставите небольшой пример jsfiddle, было бы проще указать это.

Ответ 4

Я решил свою аналогичную проблему с простым CSS:

.select2-container {
    width: 100% !important;
}

Ответ 6

Выполните это, когда вы выделите элементы управления с помощью Select2:

//refresh select2 controls (to correct offscreen size bad calculation)
$("SELECT.select2-offscreen").select2();

Ответ 7

Мое предпочтительное решение - остановить select2 от назначения этих width и позволить им быть автоматическим. Прокомментируйте следующее в select2.full.js:

Для контейнера:

  Select2.prototype._placeContainer = function ($container) {
    $container.insertAfter(this.$element);

      //##!!
      /*
    var width = this._resolveWidth(this.$element, this.options.get('width'));

    if (width != null) {
      $container.css('width', width);
    }*/
  };

Для поиска внутри контейнера:

  Search.prototype.resizeSearch = function () {

    //##!!
    /*
    this.$search.css('width', '25px');

    var width = '';

    if (this.$search.attr('placeholder') !== '') {
      width = this.$selection.find('.select2-selection__rendered').innerWidth();
    } else {
      var minimumWidth = this.$search.val().length + 1;

      width = (minimumWidth * 0.75) + 'em';
    }

    this.$search.css('width', width);
    */
  };

  return Search;
});

Ответ 9

Это сработало для меня

.select2-container  {
    width: 100% !important;
}

также фиксированная ширина

.select2-container  {
    width: 300px !important;
}

Ответ 10

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

$('#click-me').on('click', function(event) { 
   $('.select2').select2({width: '100%'});
 }

Ответ 11

У Select2 есть странная ошибка, которая не "правильно" решает скрытые элементы Select2. Это не рабочая width: "resolve" места width: "resolve" как это уже значение по умолчанию. Вместо этого, обходной путь должен показать select2 и скрыть их внезапно через секунду после объявления.

$("#div_container_of_select2").show(); //make it visible for a millisecond
$("select[name=referee_type]").select2(); //declare Select2
$("#div_container_of_select2").hide(); //back to darkness

Это будет правильно отображать select2.

Ответ 12

.select2-container {
  width: 100% !important;
}

Ответ 13

$("span.select2").css("width", "100%");