Установить ширину выпадающего элемента в вариантах выпадающего списка HTML

Я работаю над сайтом, который включает автоматическое заполнение окна выбора с помощью PHP script. Все это прекрасно работает, но проблема заключается в том, что то, что я использую для заполнения текстового поля, имеет очень длинные заголовки (это статьи журналов и заголовки презентаций). Выпадающий квадрат простирается до ширины самого длинного элемента, который простирается от края экрана, поэтому сделать полосу прокрутки невозможно. Я пробовал различные методы, пытаясь вручную установить раскрывающийся список с помощью CSS на определенную ширину, но до сих пор безрезультатно. Лучшее, что я сделал, чтобы установить поле "Выбор" на определенную ширину, но выпадающее меню само по себе намного шире.

Любые советы по этому поводу будут очень признательны.

EDIT:

Оказывается, что следующая строка CSS работает во всех основных браузерах, кроме Google Chrome (это то, что я тестировал в этой странице). Если решение для Chrome известно, об этом было бы полезно узнать.

select, option { width: __; }

Ответ 1

Вы можете стилизовать (хотя и с некоторыми ограничениями) фактические элементы с помощью селектора option:

select, option { width: __; }

Таким образом вы не только сдерживаете раскрывающийся список, но и все его элементы.

Ответ 2

Я считаю, что лучший способ обработки длинных выпадающих списков - разместить его в контейнере с фиксированной шириной div и использовать ширину: auto в теге select. Большинство браузеров будут содержать раскрывающийся список в div, но когда вы нажмете на него, он будет расширяться, чтобы отобразить полное значение параметра. Он не работает с IE Explorer, но есть исправление (как всегда, необходимо с IE). Ваш код будет выглядеть примерно так.

HTML

<div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div>

CSS

div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto\9;
}

Ответ 3

HTML:

<select class="shortenedSelect">
    <option value="0" disabled>Please select an item</option>
    <option value="1">Item text goes in here but it is way too long to fit inside a select option that has a fixed width adding more</option>
</select>

CSS

.shortenedSelect {
    max-width: 350px;
}

JavaScript:

// Shorten select option text if it stretches beyond max-width of select element
$.each($('.shortenedSelect option'), function(key, optionElement) {
    var curText = $(optionElement).text();
    $(this).attr('title', curText);

    // Tip: parseInt('350px', 10) removes the 'px' by forcing parseInt to use a base ten numbering system.
    var lengthToShortenTo = Math.round(parseInt($(this).parent('select').css('max-width'), 10) / 7.3);

    if (curText.length > lengthToShortenTo) {
        $(this).text('... ' + curText.substring((curText.length - lengthToShortenTo), curText.length));
    }
});

// Show full name in tooltip after choosing an option
$('.shortenedSelect').change(function() {
    $(this).attr('title', ($(this).find('option:eq('+$(this).get(0).selectedIndex +')').attr('title')));
});

Работает отлично. У меня была такая же проблема. Проверьте этот JSFiddle http://jsfiddle.net/jNWS6/426/

Ответ 4

На стороне сервера:

Определить максимальную длину строки
Клип строка
(необязательно) добавить горизонтальный эллипс

Альтернативное решение: элемент выбора в вашем случае (только гадание) - элемент управления с одним выбором, и вместо этого вы можете использовать группу переключателей. Тогда вы могли бы лучше стилизовать стиль. Если у вас есть выбор [@multiple], вы можете сделать то же самое с группой флажков, потому что оба они могут рассматриваться как элемент управления с несколькими вариантами выбора.

Ответ 5

Маленький и лучший

#test{
width: 202px;
}
<select id="test" size="1" name="mrraja">

Ответ 6

u может просто использовать атрибут width для "style" для изменения длины раскрывающегося окна

<select class="my_dropdown" id="my_dropdown" style="width:APPROPRIATE WIDTH IN PIXLES">
<option value="1">LONG OPTION</option>
<option value="2">short</option>
</select>

например.

style="width:200px"

Ответ 7

Маленький и лучший

var i = 0;
$("#container > option").each(function(){ 
    if($(this).val().length > i) {
        i = $(this).val().length;

        console.log(i);
        console.log($(this).val());
    }
});