0

Срочно понадобилось сделать медиа-запрос, но этим не занимался... Срочно нужна помощь... Пытался на скорую руку вставить... И получается будто селект не отображается... Как это пофксить? введите сюда описание изображения

`<div class="col-sm-5">
         <select class="form-control" id="id8">
    <option  disabled>Выберите тип участника</option>
    <option selected value="участник информационного
обмена, осуществляющий
деятельность оператора по
переводу денежных средств, –
номер лицензии, выданной
Банком России">участник информационного
обмена, осуществляющий
деятельность оператора по
переводу денежных средств, –
номер лицензии, выданной
Банком России</option>
    <option  value="участник информационного
обмена, осуществляющий
деятельность оператора услуг
платежной инфраструктуры, –
регистрационный номер
оператора услуг платежной
инфраструктуры">участник информационного
обмена, осуществляющий
деятельность оператора услуг
платежной инфраструктуры, –
регистрационный номер
оператора услуг платежной
инфраструктуры</option>
</select>
</div>

сss код(который трогал в дефолтном select2)

@media (max-width: 780px) {
.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle; }

  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none; }
    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }

    .select2-container .select2-selection--single .select2-selection__clear {
      position: relative; }

  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px; }

  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none; }

    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline-block;
      overflow: hidden;
      padding-left: 8px;
      text-overflow: ellipsis;
      white-space: nowrap; }
  .select2-container .select2-search--inline {
    float: left; }

    .select2-container .select2-search--inline .select2-search__field {
      box-sizing: border-box;
      border: none;
      font-size: 100%;
      margin-top: 5px;
      padding: 0; }
      .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
        -webkit-appearance: none; }
}
.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051; }

1 ответ 1

0

Помог один человек. Кидаю ссылку на его решение: https://jsfiddle.net/r4dg172m/6/

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

@media (max-width: 768px) {
  .select2-container {
    width: 100% !important;
  }
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.