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

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

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

EDIT:

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

select, option { width: __; }
28
css html html-select

7 ответов

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

select, option { width: __; }

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

11

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

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/

2

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

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

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

1

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

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

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

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

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

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

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