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

Question

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

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

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

Answer 1

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

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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

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

Answer 9

Проверено во всех версиях 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>

Answer 10

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