Раскрывающийся ввод в IE8 - PullRequest
Новая
       17

Раскрывающийся ввод в IE8

0 голосов
/ 28 февраля 2011

Как сделать так, чтобы в раскрывающемся меню отображалось все содержимое одного параметра при его расширении?Если параметр в раскрывающемся списке, например, целое предложение и ширина тега выбора мала, пользователь в IE не сможет прочитать весь параметр.Это не так в Mozilla, где весь контент отображается при раскрытии раскрывающегося списка.

Есть ли способ избежать такого поведения в IE8,

Спасибо

Ответы [ 2 ]

0 голосов
/ 20 сентября 2012

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

После долгих исследований я не смог найти отличный ответ, поэтому я решил исправить это с помощью jQuery и CSS:

Во-первых, давайте удостоверимся, что мы только передаем нашу функцию в IE8: 

    var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
       //fix me code
    }

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

        var isIE8 = $.browser.version.substring(0, 2) === "8.";
    if (isIE8) {
        $('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');

        //helper function for fix
        ddlFix();
    }

Теперь о событиях. Поскольку IE8 генерирует событие после фокусировки по любой причине, IE закрывает виджет после рендеринга при попытке расширения. Обходной путь будет заключаться в привязке к 'focusin' и 'focusout' классу, который будет автоматически расширяться на основе самого длинного текста опции. Затем, чтобы обеспечить постоянную минимальную ширину, которая не уменьшается после значения по умолчанию, мы можем получить текущую ширину списка выбора и установить для нее свойство минимальной ширины выпадающего списка в 'onchange' переплет: 

    function ddlFix() {
    var minWidth;

    $('select')

    .each(function () {
        minWidth = $(this).width();
        $(this).css('min-width', minWidth);
    })
    .bind('focusin', function () {
        $(this).addClass('expand');
    })
    .change(function () {
        $(this).css('width', minWidth);
    })
    .bind('focusout', function () {
        $(this).removeClass('expand');
    });
}

Наконец, обязательно добавьте этот класс в таблицу стилей: 

 select:focus, select.expand {
    width: auto;
}
0 голосов
/ 28 февраля 2011

Это печальная вещь в IE. В этом вопросе есть пример JQuery / CSS, который хорошо описывает довольно простое решение.

...