Выпадающий список HTML select уходит с экрана

Question

Выпадающий список HTML select уходит с экрана

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

<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>

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

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

1002 3

html css cross-browser

3 ответов:

Comments

Ничего не найдено.

Ryan · Accepted Answer · 2018-09-18 08:20:46

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

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

Во-вторых, необходимо указать ширину элемента в процентах, как показано ниже, недостатком является то, что ширина выбранного элемента будет динамически изменяться, и вы потеряете некоторый контроль над дизайном.
<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 или другие JavaScripts для лучшего решения в зависимости от моих потребностей в то время.

Mottie · Accepted Answer · 2015-02-19 21:06:00

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

Моим решением было скопировать содержимое опции в атрибут title. А также обновить заголовок select при изменении, так что при наведении курсора мыши на опцию или select появится всплывающая подсказка в окне браузера - 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());
    });

VAShhh · Accepted Answer · 2017-05-23 15:22:19

Проверьте этот ответ

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

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