Выровняйте меню по правому краю в select2

Есть ли способ выровнять выпадающее меню по правому краю dropdownAutoWidth: true в select2, вместо стандартного выравнивания по левому краю? Я хочу, чтобы выбор не изменился, но выпадающий список переместится влево, чтобы он выровнялся с выбором справа. Смотрите фрагмент ниже с неправильным выравниванием...

Примечание: я хочу разные размеры выбора и раскрывающегося списка, как показано.

Edit // Обновлено с предложением добавить direction: rtl; text-align: right;, Это только выравнивание текста по правому краю. Я хочу, чтобы весь выпадающий список выравнивался по правому краю с выбранным параметром над ним. Например, выпадающий список должен располагаться слева от выбранного параметра, а не справа.

Edit 2 // Обновлено с .select2-dropdown { left: -69px !important; } Это выглядит так, как я хочу, но есть ли способ не устанавливать фиксированное значение -69px?

$(".form-control").select2({
    width: '100px',
    dropdownAutoWidth : true,
});
.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

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

Источник

6 ответов

Решение

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

Изготовление rtl очень просто, просто используйте dir, но нам нужно передать некоторые другие параметры, как показано ниже:

$('select').select2({
    dir: "rtl",
    dropdownAutoWidth: true,
    dropdownParent: $('#parent')
});

Ключ здесь dropdownParentтакже вам нужно отредактировать ваш HTML следующим образом:

<div id='parent'>
    <select>
      <option selected="selected">orange</option>
      <option>white</option>
      <option selected="selected">purple</option>
    </select>
</div>

И, наконец, вам нужен CSS:

#parent {
  /* can be any value */
  width: 300px;
  text-align: right;
  direction: rtl;
  position: relative;
}
#parent .select2-container--open + .select2-container--open {
  left: auto;
  right: 0;
  width: 100%;
}

Вы можете увидеть это в действии здесь на codepen

Если у вас есть более одного выбора, вам нужен JS-код для обработки dropdownParent вариант. Кстати, ваша жизнь будет легче, если вы удалите dropdownAutoWidth вариант;)

Источник

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

HTML

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="select2-container">
    <select class="form-control">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
    </select>
</div>

CSS

      .select2-container.select2-container--default.select2-container--open {
    right: auto;
    left: unset !important;
}

.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below {
    width: fit-content !important;
    left: unset;
    right: 0;
}

JavaScript

      $('.form-control').select2({ dropdownParent: $('#select2-container') });

Результат выглядит так:

Источник

Если все еще ищете альтернативный метод. Недавно мне тоже нужно было добиться этого, и ответ RTL не был жизнеспособным решением для моего проекта. Если вы используете select2.js(4.0.6) и не возражаете против изменения скрипта, вы можете заменить следующий код и добиться правильного позиционирования, добавив класс к целевому элементу.

Ищите строки с 4381 по 4384

var css = {
  left: offset.left,
  top: container.bottom
};

Заменить следующим

var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));

if (this.$element.hasClass("right-align")) {
    var css = {
        right: right,
        top: container.bottom
    };
} else {
    var css = {
        left: offset.left,
        top: container.bottom
    };
}

Добавьте класс по правому краю к вашей цели выбора ввода.

<select id="client_select" class="form-control right-align">
     <option value="01">Example One</option>
     <option value="02">Example Two</option>
     <option value="03">Example Three</option>
</select>

Это должно быть все, что вам нужно. Если целевой элемент имеет класс, то код будет позиционировать выпадающий список, используя правое положение вместо левого. Должно работать так же, если для контейнера установлен родительский элемент. Однако, это не полностью проверено. Возможно, это не элегантное решение, но оно не требует переопределения чего-либо с помощью CSS. Нужно делать трюк до тех пор, пока не будет сделано обновление, чтобы добавить опцию для обработки выровненных по правому краю выпадающих меню. Надеюсь, поможет.

Источник

init выберите с помощью dir: "rtl", например:

$('select').select2({
   dir: "rtl,
   ...
   ...
   ...
   ...
   })
Источник

Я думаю, что это поможет вам получить то, что вам нужно.

select {
  text-align-last: right;
}

option {
  direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
  <option selected="selected">orange</option>
  <option>white</option>
  <option selected="selected">purple</option>
</select>

Источник

Тег выбора не может быть изменен css, это нужно сделать плагином jquery http://selectric.js.org/demo.html Это должно помочь вам, мой друг

Источник
Другие вопросы по тегам