Ширина выпадающего списка в IE

Question

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

Это в основном означает, что я должен убедиться, что выпадающий ящик достаточно широк, чтобы отображать максимально длинный выбор. Это делает мою страницу очень уродливой: (* ​​1003 *

Есть ли обходной путь для этой проблемы? Как я могу использовать CSS, чтобы установить разную ширину для dropbox и dropdownlist?

Answer 1

Основано на решении, опубликованном Sai , как это сделать с помощью jQuery.

$(document).ready(function() {
    if ($.browser.msie) $('select.wide')
        .bind('onmousedown', function() { $(this).css({position:'absolute',width:'auto'}); })
        .bind('blur', function() { $(this).css({position:'static',width:''}); });
});

Answer 2

У нас то же самое в asp: dropdownlist:

В Firefox (3.0.5) раскрывающийся список - это ширина самого длинного элемента в раскрывающемся списке, равная ширине 600 пикселей или что-то в этом роде.

Answer 3

Это похоже на работу с IE6 и, похоже, не нарушает других. Еще одна приятная вещь - это то, что оно меняет меню автоматически, как только вы меняете свой выпадающий список.

$(document).ready(function(){
    $("#dropdown").mouseover(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $("#dropdown").trigger("mouseover");
        }
    });

});

Answer 4

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

http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

В том же сообщении в блоге, которое я написал о создании точно такого же элемента SELECT, как и обычного, с помощью меню кнопки YUI. Посмотрите и дайте мне знать, если это поможет!

Answer 5

Пока нет ни одного. Не знаю о IE8, но это не может быть сделано в IE6 и IE7, если вы не реализуете свою собственную функцию раскрывающегося списка с помощью JavaScript. Есть примеры, как это сделать в Интернете, хотя я не вижу особой пользы в дублировании существующих функций.

Answer 6

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

$(document).ready(function () {

var clicknum = 0;

$('.dropdown').click(
        function() {
            clicknum++;
            if (clicknum == 2) {
                clicknum = 0;
                $(this).css('position', '');
                $(this).css('width', '');
            }
        }).blur(
        function() {
            $(this).css('position', '');
            $(this).css('width', '');
            clicknum = 0;
        }).focus(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        }).mousedown(
        function() {
            $(this).css('position', 'relative');
            $(this).css('width', 'auto');
        });
})(jQuery);

Обязательно добавьте раскрывающийся класс к каждому раскрывающемуся списку в html

Хитрость здесь в том, чтобы использовать специальную функцию щелчка (я нашел ее здесь Событие огня каждый раз, когда элемент DropDownList выбирается с помощью jQuery ). Многие другие решения здесь используют изменение обработчика событий, которое работает хорошо, но не сработает, если пользователь выберет ту же опцию, что была выбрана ранее.

Как и во многих других решениях, фокус и размытие предназначены для того, когда пользователь помещает раскрывающийся список в фокус, а размытие - для того, когда они щелкают.

Возможно, вы захотите добавить в это своего рода обнаружение браузера, чтобы оно действовало, т.е. Это не выглядит плохо в других браузерах, хотя

Answer 7

Вы можете добавить стиль непосредственно к элементу выбора:

<select name="foo" style="width: 200px">

Таким образом, этот выбранный элемент будет иметь ширину 200 пикселей.

В качестве альтернативы вы можете применить класс или идентификатор к элементу и ссылаться на него в таблице стилей