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

Question

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

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

EDIT:

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

select, option { width: __; }

Answer 1

Я считаю, что лучший способ обработки длинных выпадающих окон - поместить его в контейнер div фиксированной ширины и использовать width: 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;
}

Answer 2

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

select, option { width: __; }

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

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

Answer 4

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

1. Определить максимальную длину строки
2. Зажим Строка
3. (необязательно) добавить горизонтальный многоточие

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

Answer 5

Вы можете просто использовать атрибут "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"

Answer 6

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

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

Answer 7

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

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

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