Ширина списка распаковки в IE

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

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

Ответ 4

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

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

Ответ 5

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

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

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

});

Ответ 9

Вот простейшее решение!!! Прежде чем начать, я должен сказать, что выпадающее окно выбора автоматически будет расширяться почти во всех браузерах, кроме IE6.so.. я бы сделал проверку браузера [ie, IE6] и написал следующее только этому браузеру. Вот оно. Первый проверьте браузер.

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

.ctrDropDown { ширина: 420px; } .ctrDropDownClick { ширина: 420px; }

выше - 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.--%>
}

Ответ 10

http://developer.yahoo.com/yui/examples/button/button-menu-select.html#

Ответ 11

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

Ответ 12

проверьте это. Это не идеально, но оно работает, и оно только для 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%'"

Ответ 13

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

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

Ответ 14

Это то, что я сделал, принимая бит от других людей.

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

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

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

Ответ 15

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

Просто поместите это в .js, используйте широкий класс для ваших желаемых комбо и не подделывайте, чтобы дать ему Id. Вызовите функцию в 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 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');
    })
    }
}

Ответ 16

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

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

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

Ответ 17

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

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

Ответ 18

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

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

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

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

Ответ 19

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

Ответ 20

Мы имеем то же самое на asp: dropdownlist:

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

Ответ 21

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

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

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

Ответ 22

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

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

});

Ответ 23

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

Ответ 24

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

Итак, что я сделал, чтобы все было лучше, выбрал выбор внутри 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>

Ответ 25

Его протестировали во всех версиях 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>

Ответ 26

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

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

Ответ 27

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

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

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

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