0

На этой странице wp.html5dev.ru/shops в мобильной версии можно увидеть суть проблемы.

$(document).ready(function() {
  $('#cityshops').select2();
  $('.catalog-filter__box').on('click', function() {
    if ($(this).hasClass('is-flds-opened')) {
      $(this).removeClass('is-flds-opened');
    } else {
      $(this).addClass('is-flds-opened');
    }
  });
});
.js-shop-letter {
  padding-left: 20px;
}

#h3shops {
  position: relative;
  font-size: 16px;
  margin-bottom: 15px;
  width: 100%;
  color: #2b2b2b;
  text-transform: none;
}

.city.shops.select2-hidden-accessible>option {
  color: #2b2b2b;
  font-family: 'PT Serif';
  font-style: italic;
  width: 256px;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: 0 none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

span.select2-selection.select2-selection--single {
  width: 280px;
}

.catalog-filter__fields.js-scroll.scroll-content.sex label,
.catalog-filter__fields.js-scroll.scroll-content.price label {
  color: #2b2b2b;
  font-family: 'PT Serif';
  font-style: italic;
  width: 256px;
  margin: 0;
  padding: 0;
  padding-left: 30px;
  font-size: 100%;
  font-weight: 400;
  vertical-align: baseline;
  background: transparent;
  outline: 0 none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.select2-selection__rendered,
span .select2-results {
  font-size: 100%;
  font-weight: 400;
  font-family: "PT Serif";
  font-style: italic;
}

.select2-results__option {
  margin-bottom: 0;
}

li.select2-results__option.select2-results__option--highlighted:hover {
  background: #fff;
  color: #ff7c7d;
}

li.select2-results__option.select2-results__option--highlighted {
  background: #fff;
  color: #2b2b2b;
}

select.city.shops::selection {
  color: #2b2b2b;
  background: #fff;
}

select.city.shops:focus {
  border-color: #000;
  background: #fff;
}

.list-brands .nav_brands li.color-letter.active {
  color: #ff7c7d;
}

#simply-form>fieldset.catalog-filter__box.filter_flds_city>div>div.scroll-wrapper.catalog-filter__fields.js-scroll.scroll-content>div.catalog-filter__fields.js-scroll.scroll-content>select {
  color: #2b2b2b;
  font-family: 'PT Serif';
  font-style: italic;
  width: 256px;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  outline: 0 none;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #fff;
  color: #2b2b2b;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background: #fff;
}

.catalog-filter__btns button.reset {
  margin-bottom: 15px;
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {
  .d-col_lg_9 {
    width: 68%;
    margin-left: 65px;
  }
}

@media screen (min-width: 1201px) {
  .d-col_lg_9 {
    width: 72%;
    margin-left: 25px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<fieldset class="catalog-filter__box filter_flds_city">
  <h2 class="h1 catalog-filter__toggle">Город<i class="fa fa-angle-right d-hidden d-show_md"></i></h2>

  <div class="scroll-wrapper catalog-filter__fields js-scroll" style="position: relative;">
    <div class="catalog-filter__fields js-scroll" style="height: auto; margin-bottom: 0px; margin-right: 0px; max-height: 117px;">
      <select name="city" id="cityshops" class="city shops">
                        <option value="" selected></option>
                            <option value="0"></option>
                            <option value="1">Первый</option>
                            <option value="2">Второй</option>
                            <option value="3">Третий</option>
                            <option value="4">Четвертый</option>
                            <option value="5">Пятый</option>
                            <option value="6">Шестой</option>
                            <option value="7">Седьмой</option>
                    </select>
    </div>
  </div>
</fieldset>

1 ответ 1

0

Добавьте

.select2({width: '100%'});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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