1

Сейчас работаю с формой, где пользователь должен заполнить поля и выбрать тип из элемента select. Но при нажатие на select, отоброжается слишком большое окно с вариантами, при этом также не видно часть строк с длинними названиями.

ужё 5 часа ищу из инет, но никак не мог найти ответ.

тут скрин: отображение элемента селект Как уменьшить появляющий окно элемента select?

А вообще есть другие варианты вместа элемента select?

3
  • Короткий ответ: никак, окно принимает ширину самого длинного текста из опций, а его к тому же и разбить на несколько строчек невозможно. А над длинным ответом придется заморочиться)) Например сделать свой собственный селект из div, где уже прописать максимальные размеры, overflow: scroll и т.п. Commented 22 мая 2019 в 11:58
  • А там нужно что-то именно похожее на селект? Раз уж прибегать к JS, то можно вообще по-своему сделать... например высплывающее окно, которое будет всегда центрировано, независимо от положения блоков. Всплыло - выбрали, закрылось. Commented 22 мая 2019 в 12:26
  • Судя по изображению: там два select рядом расположены и далее идут прямоугольники, одинаковой ширины. Возможно для вашей задачи подойдет один select со множественным выбором. При переполнении ширины текст скрывается, и к тому же ему и высоту можно задать. <select size="12" multiselect>
    – user256824
    Commented 22 мая 2019 в 23:35

4 ответа 4

2

С нуля записал подобную штуку) Выбрал именно такой вариант, потому что задолбался в CSS прописывать выпадающий список с абсолютной позицией... да и HTML бы усложнился из-за этого. Так как-то проще чтоли... не думаю, что пользователю будет менее удобно от этого.

JsFiddle

(function(){
  let hint   = document.getElementById('FullHint');
  let select = document.getElementsByClassName('select');
  let modal  = document.getElementsByClassName('modal-options');
  for( let i = 0; i < select.length; i++){
    /* Специально заранее добавляется value всем селектам, чтобы выбранный можно было
    достать через select[].value, как в случае с обычными опциями*/
    select[i].value = "";
    select[i].addEventListener('click', function(){
      /* При клике на селект - вылетает большое окно выбора
      и скрывается всплывающая подсказка, если она была*/
      modal[i].style.display = 'block';
      hint.classList.remove('show');
    });
    /* Кусок для всплывающего текста-подсказки, если выбран слишком длинный текст*/
    select[i].addEventListener('mouseenter', function(){
      if( this.value.length > 10 ){
        hint.innerText = this.value;
        hint.classList.add('show');        
      }
    });
    select[i].addEventListener('mousemove', function(e){
      hint.style.top = (e.pageY + 25) + 'px';
      hint.style.left = (e.pageX + 25) + 'px';
    });
    select[i].addEventListener('mouseleave', function(){
      hint.classList.remove('show');
    });
    /* конец куска подсказок */
    
    /* При клике на список опций (или вне списка) - окно закрывается */
    modal[i].addEventListener('click', function(){
      this.style.display = 'none';
    });
    
    /* Достаем все опции внутри текущего окна */
    let option = modal[i].getElementsByClassName('option');
    for(let u = 0; u < option.length; u++){
      option[u].addEventListener('click', function(){
        /* При клике на очередную - меняем value и innerText селекта */
        let text = this.innerText;
        select[i].value = text;
        if( text.length > 10 ){
          text = text.slice(0,8) + '...';
        }
        select[i].innerText = text;
      });
    }
  }
})();
* {margin: 0;}
.select {
  display: inline-block;
  width: 100px; max-width: 100px;
  border: 1px solid #9c009c;
  overflow: hidden;
  padding: 2px 4px;
  box-sizing: border-box;
  margin: 5px;
  cursor: pointer;
}
.select:hover {background-color: #b2307c; color: white;}
.select:before {content: '▼'; font-size: 12px;}

.modal-options {
  position: fixed; display: none;
  z-index: 2147483647; /* Максимально возможный z-index; */
  width: 100vw; height: 100vh;
  top: 0;
  background-color: rgba(200,0,0,0.2);
}
.options {
  width: 80%; max-width: 1200px; height: 90vh;
  margin: 5vh auto;
  background-color: #ffd2ff;
  border: 1px solid #9c007c;
  overflow: auto;
}
.option {
  border-bottom: 1px solid #9c007c;
  padding: 2px; cursor: pointer;
}
.option:hover {background-color: #ffeeee;}

#FullHint {
  display: none;
  max-width: 1200px; background-color: white; 
  border: 2px solid #ec306c;
  padding: 2px 4px;
}
#FullHint.show {
  display: inline-block;
  position: absolute;
  margin-right: 30px;
}
<div id="FullHint"></div><!-- Добавлен для всплывающей подсказки при наведении -->

<div class="select">select...</div>
<div class="modal-options">
  <div class="options">
    <div class="option">
      Писец какой длинный тект, просто нереально длинный, очень-очень длинный текст
    </div>
    <div class="option">Другой текст</div>
    <div class="option">бубу</div>
    <div class="option">куку</div>
  </div>
</div>

<div class="select">select...</div>
<div class="modal-options">
  <div class="options">
    <div class="option">
      Писец какой длинный тект, просто нереально длинный, очень-очень длинный текст
    </div>
    <div class="option">Другой текст</div>
    <div class="option">бубу</div>
    <div class="option">куку</div>
  </div>
</div>

P.s. не разобрался, как центрировать блок сверху и снизу... если у него абсолютная позиция. top: 0; bottom 0; растягивают его на всю страницу, если не задан height. А он не может быть задан, т.к. контент разный.

0

Как вариант, можете использовать этот плагин http://gregfranko.com/jquery.selectBoxIt.js/ Он достаточно прост в использовании и позволяет неплохо кастомизировать селекты.

2
  • Спасибо )) только что тестировал, тоже не может работать с длинними значениями
    – niz_sh
    Commented 22 мая 2019 в 11:32
  • @ShuhratjanNizamov а какой вы хотите найти выход с длинным значением? Обрезать его? Перенести строку?
    – Dizzy221
    Commented 22 мая 2019 в 12:19
0

Количество показываемых строк может задать атрибутом size="количество строк", а ширину окна можно стилизовать с помощью css и задать открытому окну максимальную ширину. А на счет других вариантов... Вы можете сделать select кнопкой или ссылкой, ппри нажатии на которую будет открываться импровизированный список по центру экрана с выбранными вариантами, если вариантов будет очень много, то будет ползунок справа , а высота будет неизменной, это если в крации:)

Тут, конечно в дело вступает или jquery или js

-1

родителю задаёшь position:relative; display: flex; align-items: center;

1
  • P.s. не разобрался, как центрировать блок сверху и снизу... если у него абсолютная позиция. top: 0; bottom 0; растягивают его на всю страницу, если не задан height. А он не может быть задан, т.к. контент разный. Commented 5 июл. 2020 в 18:11

Ваш ответ

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

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