HTML выберите выпадающий экран

Question

Учитывая следующий код:

<div style="float: left;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

<div style="float: right;">
  <select style="width: 160px;">
    <option>asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
    <option>1</option>
    <option>2</option>
  </select>
</div>

При открытии правой панели выбора содержимое выпадающего меню исчезает с экрана. Также, когда список будет длиннее, вы не сможете прокручивать список (только с помощью колесика мыши и клавиатуры, но полоса прокрутки невидима)

Есть ли исправление для этого? Конечно, вы можете установить ширину / максимальную ширину для опций, но это обрезает содержимое элемента option. Есть предложения?

Answer 1

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

У вас есть 2 возможных варианта, которые я вижу, не переходя на решение JavaScript, во-первых, это повторное размещение элементов, чтобы обеспечить более длинный контент.

Во-вторых, укажите ширину элемента в процентном значении, как показано ниже, недостатком является то, что ширина элемента select будет динамически изменяться, и вы потеряете некоторый элемент управления дизайном.

<div style="float: right;">
  <select style="width:100%">
    <option width="">asd flkjh asdfkljha sdlkfjhasldjkfh aslkjdfh asjdhf alksjdhl k</option>
            <option>1</option>
            <option>2</option>
        </select>
    </div>

Я провел быстрый тест в Chrome и Firefox, вы можете использовать любое значение в процентах, которое вы хотите, я тестировал на 100% и 50%, на 50% - в зависимости отв зависимости от характера содержимого или любых значений заполнителя, таких как "--SELECT--", элемент будет отображать только половину длины самого длинного элемента.

Я бы скорее всего заглянул в плагины jQuery или другие скрипты Java для лучшего решения в зависимости от моих потребностей в данный момент.

Answer 2

Недавно я столкнулся с этой проблемой (с Firefox) - открытое меню выбора выходило бы за пределы экрана рабочего стола.

Моим решением было скопировать содержимое параметра в атрибут title. А также обновите заголовок выбора при изменении, поэтому при наведении указателя мыши на этот параметр или кнопку выбора в окне браузера отобразится всплывающая подсказка - demo .

var $select = $('select');

$select
    .on('change', function () {
        var $this = $(this),
            // use replace to remove extra white (if desired)
            txt = $this.find('option:selected').text().replace(/\s+/g, ' ');
        // add title to select
        $this.attr('title', txt);
    })
    .change()
    .find('option').each(function () {
        var $this = $(this);
        // add title to each option, so it works on hover
        $this.attr('title', $this.text());
    });

Answer 3

Ознакомьтесь с этим ответом

Возможны ли многострочные параметры в HTML-тегах Выбрать теги?

При использовании чистого HTML и выбора невозможно автоматически обернутьсодержимое параметра в несколько строк (чтобы оно не исчезло с экрана)