it-swarm-ru.tech

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

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

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

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

92
Nimesh Madhavan

Вот еще один пример 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 . Надеюсь это поможет.

102
BalusC

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

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

14
Sleep Deprivation Ninja

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

  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=''"

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

12
Sai

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

<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.

9
Justin Fisher

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

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

7
Tinus

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

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

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

5
Ewen

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

5
Robert C. Barth

В 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");
    }
    });

});
4
Thad

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

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

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

.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>

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

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

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

onmousedown="javascript:if(navigator.appName=='Microsoft Internet Explorer'){this.style.width='auto'}" 
onchange="this.style.width='35%'"
onblur="this.style.width='35%'"
2
lucien

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

2
cam

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

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

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

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

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

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

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

2
mcmwhfy

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

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

2
PowerKiKi
1
Ybbest

Решение 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');
    })
    }
}
1
Federico Valido

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

$(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 каждый раз, когда элемент DropDownList выбирается с помощью jQuery ). Многие другие решения здесь используют изменение обработчика событий, которое работает хорошо, но не сработает, если пользователь выберет ту же опцию, что была выбрана ранее.

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

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

0
RasTheDestroyer

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

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

});
0
lhoess

Основываясь на решении, опубликованном 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:''}); });
});
0
Ahmad Alfy

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

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

0
Harlequin

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

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

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

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

0
Katy

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

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

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

0
Hammad Tariq

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

0
pilsetnieks

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

// код JavaScript

<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel) {
  sel.style.width = '';
}
function contractSELECT(sel) {
  sel.style.width = '100px';
}
// end hiding -->
</script>

// 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>
0
Arif

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

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

0
Aerendel

Я думал, что я брошу свою шляпу в кольцо Я создаю приложение 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';}"

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

<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>
0
n0nag0n