HTML Select параметры ширины обрезается в IE. Любые решения?

Question

В браузерах Mozilla и не IE, если опция списка выбора имеет большую длину, чем ширина выбора, она будет отображаться. Но в IE он обрезает опцию до ширины выбора.

Есть ли способ сделать поведение выбора IE таким же, как в браузерах, отличных от IE?

Answer 1

Это, кажется, хорошо работает, заставляя IE пересмотреть выбранную ширину. Работает в IE7 и IE8.

if (jQuery.browser.msie) {
    jQuery("#" + selectID).css("width", "100%").css('width', 'auto');
}

Answer 2

Я поместил в ячейку таблицы, просто пытаясь сохранить ту же ширину с ячейкой.

$("#id" ).width($("#id" ).parent().width());

Кстати, спасибо за все посты, мне это очень помогает.

Answer 3

Мне нравится решение 26design, но у него есть 2 недостатка:

1. При некоторых обстоятельствах можно дважды запустить событие наведения мыши, в результате чего переменная origWidth будет установлена ​​в значение «auto», предотвращая возврат селектора к исходному размеру.

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

Эта версия устраняет обе эти проблемы:

if($.browser.msie) {
    /* IE obscures the option text for fixed-width selects if the text 
     * is longer than the select. To work around this we make the width 
     * auto whenever the drop down is visible.
     */
    $("select.fixed-width").livequery(function(){
        /* Use mousedown rather than focus because the focus event gets 
         * interrupted and the dropdown does not appear 
         */
        $(this)
        .mousedown(function(){
            if($(this).css("width") != "auto") {
                var width = $(this).width();
                $(this).data("origWidth", $(this).css("width"))
                       .css("width", "auto");
                /* if the width is now less than before then undo */
                if($(this).width() < width) {
                    $(this).css("width", $(this).data("origWidth"));
                }
            }
        })
        /* Handle blur if the user does not change the value */
        .blur(function(){
            $(this).css("width", $(this).data("origWidth"));

        })
        /* Handle change of the user does change the value */
        .change(function(){
            $(this).css("width", $(this).data("origWidth"));

        });
    });
}

Проверено в IE6-8

Answer 4

CSS:

.set_width { width:120px; }

HTML:

<select class="set_width"><option>one</option><option>two</option></select>

Answer 5

Лучшее решение, описанное здесь: http://www.dougboude.com/blog/1/2008/05/Viewing-Option-Text-in-IE7-thats-Wider-than-the-Select-List.cfm

Answer 6

У меня есть select в ячейках таблицы, и следующий код помог мне:

.myClass{
   width: 100%;//most of browsers
   _width: auto;//ie6 hack
}

Приветствия

Answer 7

for (i=1;i<=5;i++){
       idname = "Usert" + i;
       document.getElementById(idname).style.width = "100%";

}

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

Это работает для IE6, Firefox и Chrome.

Answer 8

Вот еще один подход, который работал для меня:

<style>
select.limited-width {
    width: 200px;
    position: static;
}

select.expanded-width {
    width: auto;
    position: absolute;
}
</style>

<select class="limited-width" 
        onMouseDown="if(document.all) this.className='expanded-width';"
        onBlur="if(document.all) this.className='limited-width';"
        onChange="if(document.all) this.className='limited-width';">

    <option>A normal option</option>
    <option>A really long option which messes everything up</option>
</select>

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

Я решил положиться на сниффинг document.all в качестве проверки IE, поскольку он сохраняет компактность и устраняет необходимость в отдельной функции. Если это не работает для вас, определите функцию в условных комментариях IE и вызовите ее вместо этого.

Одна маленькая ошибка, если вы выберете тот же элемент, он не будет уменьшаться снова, пока вы не переместите фокус на другой элемент, я называю это функцией; -)

Answer 9

У меня есть решение, которое работает для меня, поэтому я решил пойти дальше и опубликовать его (с некоторыми оговорками внизу). Я уверен, что это не самое эффективное использование jQuery, но оно работает так, как я хочу, чтобы оно работало. По сути, у меня есть список часовых поясов, которые (очевидно) довольно длинные текстовые строки.

<!--[if IE]>
<script type="text/javascript">
    $(document).ready(function() {
        $("select.timeZone")
        .mouseover(function() {
            $(this)
                .data("origWidth", $(this).css("width"))
                .css("width", "auto")
                .focus();
        })
        .mouseout(function() {
            $(this)
                .blur(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
                .change(function() {
                    $(this).css("width", $(this).data("origWidth"));
                })
        });
    });
</script>
<![endif]-->

Описание:

• Условно установлено только для браузеров IE.
• Это решение представляет собой модифицированную версию скрипта, предоставленную Крисом Койером (http://css -tricks.com / select-cuts-off-options-in-ie-fix / ).
• Кроме того, это решение предполагает, что вы, как и я, не особо заботитесь о IE6. Базовая функциональность есть, поэтому браузеры IE6 по-прежнему могут видеть большинство параметров выбора, отправлять форму и т. Д., Но я не могу больше тратить время на попытки утешить эту небольшую подгруппу.

Предостережения:

• Список выбора имеет фиксированную ширину перед фокусировкой.
• Onmouseout, список должен быть размытым или изменен, прежде чем размер вернется к исходной фиксированной ширине. Причина, по которой я убедился, что список выбора был размыт или изменен первым, заключается в том, что ранее onmouseout отключался, как только ваша мышь покидала поле выбора (это означает, что вы можете попытаться выбрать опцию, но они исчезнут, прежде чем вы нажмете одну из них). ).
• И наоборот, при наведении курсора мыши фокус устанавливается, чтобы убедиться, что событие размытия срабатывает правильно.

Answer 10

Абсолютно самый простой способ убедиться, что выбранные списки всегда имеют такую ​​же ширину, какой они должны быть, - это разрешить браузеру устанавливать их ширину, т.е. Этот «метод» (на самом деле не метод, так как он не делает что-то) будет работать на любом браузере, даже IE6.