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

92

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

По сути, это означает, что я должен убедиться, что Dropbox достаточно широк, чтобы отображать как можно более длинный выбор. Из-за этого моя страница выглядит очень некрасиво :(

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

javascript html internet-explorer drop-down-menu Нимеш Мадхаван
источник

Ответы:

102

Вот еще один пример на основе jQuery . В отличие от всех других ответов, опубликованных здесь, он учитывает все события клавиатуры и мыши, особенно щелчки:

if (!$.support.leadingWhitespace) { // if IE6/7/8
    $('select.wide')
        .bind('focus mouseover', function() { $(this).addClass('expand').removeClass('clicked'); })
        .bind('click', function() { $(this).toggleClass('clicked'); })
        .bind('mouseout', function() { if (!$(this).hasClass('clicked')) { $(this).removeClass('expand'); }})
        .bind('blur', function() { $(this).removeClass('expand clicked'); });
}

Используйте его в сочетании с этим фрагментом CSS:

select {
    width: 150px; /* Or whatever width you want. */
}
select.expand {
    width: auto;
}

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

<select class="wide">
    ...
</select>

Вот пример jsfiddle . Надеюсь это поможет.

BalusC
источник
2
+1: Из всех предложенных здесь решений это сработало для меня лучше всего. Мне также нужно было внести изменения в CSS и HTML, чтобы он работал в моем случае. Так много работы для того, что должно работать из коробки.
kgiannakakis
1
Работает с IE7 не в IE6 - есть ли настройка для IE6?
DM
4
@DMin: Извините, мы не поддерживаем устаревшие и устаревшие браузеры, такие как IE6.
BalusC
3
@BalusC: :) Я знаю, что мой друг IE отстой - тем не менее, я использовал ваш ответ, он работал для IE7 - написал отдельный код для IE6, который включал ваш ответ + привязку. ('Mouseenter' .. - отлично сработало - Спасибо в любом случае! :)
DMin
3
В зависимости от ваших других css-правил - возможно, вам придется добавить! width: auto !important;
Important
14

Создание собственного раскрывающегося списка - это гораздо труднее, чем того стоит. Вы можете использовать JavaScript, чтобы раскрывающийся список IE работал.

Он использует немного библиотеки YUI и специальное расширение для фиксации окон выбора IE.

Вам нужно будет включить следующее и обернуть <select>элементы в<span class="select-box">

Поместите их перед тегом body вашей страницы:

<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" type="text/javascript">
</script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" type="text/javascript">
</script>
<script src="ie-select-width-fix.js" type="text/javascript">
</script>
<script>
// for each select box you want to affect, apply this:
var s1 = new YAHOO.Hack.FixIESelectWidth( 's1' ); // s1 is the ID of the select box you want to affect
</script>

Принятие публикации редактировать:

Вы также можете сделать это без библиотеки YUI и управления взломом. Все, что вам действительно нужно сделать, это поставить onmouseover = "this.style.width = 'auto'" onmouseout = "this.style.width = '100px'" (или что угодно) на элемент select. Элемент управления YUI дает ему красивую анимацию, но в этом нет необходимости. Эту задачу также можно выполнить с помощью jquery и других библиотек (хотя я не нашел для этого явной документации)

- поправка к редактированию: у
IE есть проблема с onmouseout для элементов управления выбором (он не считает, что наведение указателя мыши на параметры является наведением указателя мыши на выделение). Это делает использование mouseout очень сложным. Первое решение - лучшее, что я нашел до сих пор.

Ниндзя лишения сна
источник
3
Я получаю 404 по обеим этим ссылкам
Крис Би
Проблема с этим исправлением заключается в том, что у вас есть динамический выбор, например, в приложении электронной торговли для атрибутов продукта. Вы никогда не узнаете идентификаторы всех выпадающих
списков
1
Ссылки больше не 404, но показывают то, что я считаю вредоносным спамом. Я рассматривал возможность голосования против, но я буду любезен и просто укажу на это.
davur
12

вы можете просто попробовать следующее ...

  styleClass="someStyleWidth"
  onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}" 
  onblur="this.style.position='';this.style.width=''"

Я пробовал, и у меня это работает. Больше ничего не требуется.

Сай
источник
1
Круто, я немного улучшил его (используя условный комментарий для обнаружения IE) и добавил несколько комментариев, он отлично работает, без jQuery или других библиотек. См. Здесь: jsbin.com/ubahe5/edit - PLZ ИЗМЕНИТЕ свой ответ, который Я ХОЧУ ДАВАТЬ ВАМ +1, но не могу, потому что раньше я голосовал неправильно.
Марко Демайо,
9

Я использовал следующее решение, и, похоже, оно хорошо работает в большинстве ситуаций.

<style>
select{width:100px}
</style>

<html>
<select onmousedown="if($.browser.msie){this.style.position='absolute';this.style.width='auto'}" onblur="this.style.position='';this.style.width=''">
  <option>One</option>
  <option>Two - A long option that gets cut off in IE</option>
</select>
</html>

Примечание: $ .browser.msie требует jquery.

Джастин Фишер
источник
Для всех, кто чувствует сонливость, это должно быть на маусе, а не на маске - мне потребовалось несколько минут, чтобы понять проблему
shearichard
7

@ Если вам нужно добавить обработчик события размытия

$(document).ready(function(){
    $("#dropdown").mousedown(function(){
        if($.browser.msie) {
            $(this).css("width","auto");
        }
    });
    $("#dropdown").change(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
    $("#dropdown").blur(function(){
        if ($.browser.msie) {
            $(this).css("width","175px");
        }
    });
});

Тем не менее, это по-прежнему будет расширять поле выбора при нажатии, а не только элементы. (и, похоже, в IE6 он не работает, но отлично работает в Chrome и IE7)

Тинус
источник
5

В IE6 / IE7 / IE8 нет возможности сделать это. Элемент управления отрисовывается приложением, а IE просто не отрисовывает его таким образом. Лучше всего реализовать собственное раскрывающееся меню с помощью простого HTML / CSS / JavaScript, если так важно, чтобы раскрывающийся список имел одну ширину, а список - другую ширину.

Роберт С. Барт
источник
решение: используйте javascript и css для автоматической регулировки ширины при наведении курсора мыши (и других событиях клавиатуры ...). читайте здесь: css-tricks.com/select-cuts-off-options-in-ie-fix лучшее решение (менее инвазивное)
tuffo19
5

Если вы используете jQuery, попробуйте этот плагин выбора ширины IE:

http://www.jainaewen.com/files/javascript/jquery/ie-select-style/

Применение этого плагина заставляет поле выбора в Internet Explorer работать так же, как в Firefox, Opera и т. Д., Позволяя элементам параметров открываться на полную ширину без потери внешнего вида и стиля фиксированной ширины. Он также добавляет поддержку заполнения и границ в поле выбора в Internet Explorer 6 и 7.

Юэн
источник
4

В jQuery это работает довольно хорошо. Предположим, что в раскрывающемся списке есть id = "dropdown".

$(document).ready(function(){

    $("#dropdown").mousedown(function(){
    if($.browser.msie) {
        $(this).css("width","auto");
    }
    });
    $("#dropdown").change(function(){
    if ($.browser.msie) {
        $(this).css("width","175px");
    }
    });

});
Эран Медан
источник
3

Вот самое простое решение.

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

Код волшебным образом расширяет раскрывающееся поле выбора. Единственная проблема с решением - onmouseover раскрывающийся список будет расширен до 420 пикселей, и, поскольку overflow = hidden, мы скрываем размер развернутого раскрывающегося списка и показываем его как 170 пикселей; Таким образом, стрелка справа от ddl будет скрыта и не будет видна. но поле выбора будет расширено до 420 пикселей; чего мы действительно хотим. Просто попробуйте приведенный ниже код для себя и используйте его, если он вам нравится.

.ctrDropDown
{
    width:420px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:420px; <%-- this the width of the dropdown select box.--%>
}

<div style="width:170px; overflow:hidden;">
<asp:DropDownList runat="server" ID="ddlApplication" onmouseout = "this.className='ctrDropDown';" onmouseover ="this.className='ctrDropDownClick';" class="ctrDropDown" onBlur="this.className='ctrDropDown';" onMouseDown="this.className='ctrDropDownClick';" onChange="this.className='ctrDropDown';"></asp:DropDownList>
</div>

Это CSS IE6. Общий CSS для всех других браузеров должен быть таким, как показано ниже.

.ctrDropDown
{
    width:170px; <%--this is the actual width of the dropdown list--%>
}
.ctrDropDownClick
{
    width:auto; <%-- this the width of the dropdown select box.--%>
}
bluwater2001
источник
2

если вам нужно простое раскрывающееся и / или всплывающее меню без эффектов перехода, просто используйте CSS ... вы можете заставить IE6 поддерживать: наведите указатель мыши на все элементы, используя файл .htc (css3hover?) с поведением (только свойство IE6), определенным в условно прикрепленный файл CSS.

кулачок
источник
2

проверьте это ... это не идеально, но работает, только для IE и не влияет на FF. Я использовал обычный javascript для onmousedown, чтобы установить только исправление IE .. но msie из jquery можно было бы использовать и в onmousedown .. основная идея - "onchange" и размытие, чтобы вернуть поле выбора в нормальное состояние .. Решите, что ваша ширина для них. Мне нужно было 35%.

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
Люсьен
источник
2

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

.bind('mouseover', function() { $(this).addClass('expand').removeClass('clicked');
                                if ($(this).width() < 300) // put your desired minwidth here
                                {
                                    $(this).removeClass('expand');
                                }})
jbabey
источник
2

Это то, что я сделал, взяв кусочки из чужих вещей.

        $(document).ready(function () {
        if (document.all) {

            $('#<%=cboDisability.ClientID %>').mousedown(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboDisability.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboDisability.ClientID %>').change(function () {
                $('#<%=cboDisability.ClientID %>').css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').mousedown(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': 'auto' });
            });

            $('#<%=cboEthnicity.ClientID %>').blur(function () {
                $(this).css({ 'width': '208px' });
            });

            $('#<%=cboEthnicity.ClientID %>').change(function () {
                $('#<%=cboEthnicity.ClientID %>').css({ 'width': '208px' });
            });

        }
    });

где cboEthnicity и cboDisability - это раскрывающиеся списки, в которых текст параметра шире, чем ширина самого выделения.

Как видите, я указал document.all, поскольку он работает только в IE. Кроме того, я заключил выпадающие списки в элементы div следующим образом:

<div id="dvEthnicity" style="width: 208px; overflow: hidden; position: relative; float: right;"><asp:DropDownList CssClass="select" ID="cboEthnicity" runat="server" DataTextField="description" DataValueField="id" Width="200px"></asp:DropDownList></div>

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

Надеюсь, это кому-то поможет.

Деррик
источник
2

это лучший способ сделать это:

select:focus{
    min-width:165px;
    width:auto;
    z-index:9999999999;
    position:absolute;
}

это точно так же, как решение BalusC. Только так проще. ;)

mcmwhfy
источник
Я повторно протестировал ваш css, и он работает в Chrome и немного в Firefox, но не в IE8. (Может быть, мой IE8 - другая версия?) С тех пор я придумал собственное решение на основе js. См. Tahirhassan.blogspot.co.uk/2013/02/…
Тахир Хассан
Немного поигрался в IE8 с этим, и позже это помогло. Мне просто нужно было установить родительский <td> на фиксированную ширину, переместить верхнее значение и ¡ahí estuvo !. Спасибо
j4v1 07
2

Доступен полноценный плагин jQuery. Он поддерживает неразрывную раскладку и взаимодействие с клавиатурой, посмотрите демонстрационную страницу: http://powerkiki.github.com/ie_expand_select_width/

отказ от ответственности: я закодировал эту вещь, патчи приветствуются

PowerKiKi
источник
1

Решение jquery BalusC улучшено мной. Используется также: комментарий Брэда Робертсона здесь .

Просто поместите это в .js, используйте широкий класс для желаемых комбинаций и не пытайтесь присвоить ему идентификатор. Вызовите функцию в onload (или documentReady или что-то еще).
Какая простая задница :)
Он будет использовать ширину, которую вы определили для комбо, как минимальную длину.

function fixIeCombos() {
    if ($.browser.msie && $.browser.version < 9) {
    var style = $('<style>select.expand { width: auto; }</style>');
    $('html > head').append(style);

    var defaultWidth = "200";

    // get predefined combo's widths.
    var widths = new Array();
    $('select.wide').each(function() {
        var width = $(this).width();
        if (!width) {
        width = defaultWidth;
        }
        widths[$(this).attr('id')] = width;
    });

    $('select.wide')
    .bind('focus mouseover', function() {
        // We're going to do the expansion only if the resultant size is bigger
        // than the original size of the combo.
        // In order to find out the resultant size, we first clon the combo as
        // a hidden element, add to the dom, and then test the width.
        var originalWidth = widths[$(this).attr('id')];

        var $selectClone = $(this).clone();
        $selectClone.addClass('expand').hide();
        $(this).after( $selectClone );
        var expandedWidth = $selectClone.width()
        $selectClone.remove();
        if (expandedWidth > originalWidth) {
        $(this).addClass('expand').removeClass('clicked');
        }
    })
    .bind('click', function() {
        $(this).toggleClass('clicked'); 
    })
    .bind('mouseout', function() {
        if (!$(this).hasClass('clicked')) {
        $(this).removeClass('expand');
        }
    })
    .bind('blur', function() {
        $(this).removeClass('expand clicked');
    })
    }
}
Федерико Валидо
источник
0

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

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

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

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

Кэти
источник
0

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

Pilsetnieks
источник
0

То же самое и с выпадающим списком asp::

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


источник
0

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

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

});
Lhoess
источник
0

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

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

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

Хаммад Тарик
источник
0

Основываясь на решении, опубликованном Сай , вот как это сделать с помощью 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:''}); });
});
Ахмад Альфи
источник
0

Думал бросить шляпу на ринг. Я делаю приложение SaaS, и у меня есть меню выбора, встроенное в таблицу. Этот метод работал, но искажал все в таблице.

onmousedown="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position='absolute';this.style.width='auto'}
onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}"

Итак, что я сделал, чтобы все было лучше, так это бросил выделение в div с z-индексом.

<td valign="top" style="width:225px; overflow:hidden;">
    <div style="position: absolute; z-index: 5;" onmousedown="var select = document.getElementById('select'); if(navigator.appName=='Microsoft Internet Explorer'){select.style.position='absolute';select.style.width='auto'}">
        <select name="select_name" id="select" style="width: 225px;" onblur="if(navigator.appName=='Microsoft Internet Explorer'){this.style.position=''; this.style.width= '225px';}" onChange="reportFormValues('filter_<?=$job_id?>','form_values')">
            <option value="0">All</option>
            <!--More Options-->
        </select>
    </div>
</td>
n0nag0n
источник
0

Мне пришлось обойти эту проблему, и однажды я придумал довольно полное и масштабируемое решение, работающее для IE6, 7 и 8 (и, очевидно, совместимое с другими браузерами). Я написал об этом целую статью прямо здесь: http://www.edgeoftheworld.fr/wp/work/dealing-with-fixed-sized-dropdown-lists-in-internet-explorer

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

Aerendel
источник
0

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

$(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

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

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

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

RasTheDestroyer
источник
0

Он протестирован во всех версиях IE, Chrome, FF и Safari.

Код JavaScript:

<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}

function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->

HTML-код:

<select name="sideeffect" id="sideeffect"  style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
  <option value="0" selected="selected" readonly="readonly">Select</option>
  <option value="1" >Apple</option>
  <option value="2" >Orange + Banana + Grapes</option>
Ариф
источник