Выпуск выпадающего списка

Question

У меня проблема с раскрывающимся списком в IE 6/7:

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

Однако в Firefox это не проблема, так как он соответственно расширяет ширину. Это поведение, которое мы хотим в IE 6/7:

Мы рассмотрели различные способы использования событий onfocus, onblur, onchange, клавиатуры и мыши для решения проблемы, но все же некоторые проблемы.

Мне было интересно, решил ли кто-нибудь эту проблему в IE 6/7 без использования каких-либо наборов инструментов / сред (YUI, Ext-JS, jQuery и т. Д.).

Answer 1

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

редактировать

Ссылка, которую я начал искать, была на самом деле эта , та самая, которую предложил Тим. Я думаю, что это лучшее решение, чем моя оригинальная находка. 2nd edit Это решение на самом деле зависит от инфраструктуры YUI, но я бы не стал копировать основную идею, стоящую за ним, слишком сложно. В противном случае, 1-я ссылка тоже в порядке, и намного проще.

Удачи.

Answer 2

<script type="text/javascript">
    var MAX_WIDTH = 500; //the biggest width the select is allowed to be

    function biggestOption(elem) {
        var biggest = 0;
        for (var i=0;i<elem.options.length;i++) {
            if ( elem.options[i].innerHTML.length > biggest ) {
                biggest = elem.options[i].innerHTML.length;
            }
        }
        return roughPixelSize(biggest);
    }

    function roughPixelSize(charLength) {
        //this is far from perfect charLength to pixel
        //but it works for proof of concept
        roughSize =  30 + (charLength * 6);
        if (roughSize > MAX_WIDTH) {
            return MAX_WIDTH;
        } else {
            return roughSize;
        }
    }

    function resizeToBiggest(elem) {
        elem.style.width = biggestOption(elem);
    }

    function resizeToSelected(elem) {
        elem.style.width = roughPixelSize(elem.options[elem.selectedIndex].innerHTML.length);
    }

</script>

<select onmouseover="resizeToBiggest(this)" style="width:70px" onchange="resizeToSelected(this)" onblur="resizeToSelected(this)" >
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>this is some really really realy long text</option>
    <option>test 4</option>
    <option>test 5</option>
</select>

Я не думаю, что то, что вы хотите сделать, возможно без большой работы или использования фреймворка. Выше вы можете попробовать / возиться с ...

Answer 3

Может ли что-то подобное быть выполнимым в вашей ситуации?

http://www.hedgerwow.com/360/dhtml/ui_select_with_fixed_width/demo.php

Ширина раскрывающегося списка увеличивается / уменьшается во время наведения мыши.

Answer 4

По сути, если вам действительно нужно АКТУАЛЬНОЕ текстовое поле, вам нужно будет выбрать одно или другое (определять или не определять ширину). Это классический пример трудностей в кодировании для всех известных используемых браузеров, и на самом деле нет никакого способа обойти это, пока компании не соберутся и не скажут: «Так будет. НАВСЕГДА».

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

Answer 5

Я проверил это на IE7, и он расширяется соответственно. Вы уверены, что не используете какой-то странный CSS, который заставляет его быть такого размера только в IE 6/7? (Можно настроить таргетинг на определенные браузеры, используя странные хаки CSS-селекторов, такие как * html)

Answer 6

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

У нас есть выпадающий список с фиксированной шириной, и мы хотим, чтобы он вел себя как в FireFox 7, как показано выше.

Answer 7

Как вы заполняете DropDownList. Я использую следующий код для заполнения DropDownList, и он регулирует ширину в соответствии с наибольшим отображаемым текстом:

private void BindData()
        {
            List<Foo> list = new List<Foo>();
            list.Add(new Foo("Hello"));
            list.Add(new Foo("bye bye"));
            list.Add(new Foo("this is a reall asd a s das d asd as da sf gfa sda sd asdasd a"));

            ddl1.DataSource = list;
            ddl1.DataTextField = "Text"; 
            ddl1.DataBind(); 
        }

О да, не указывайте явно ширину в DropDownList.

Answer 8

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

[РЕДАКТИРОВАТЬ] Да, проверено в веб-приложении vs2005. Добавил элемент управления и поместил элементы. Он приспособился к самому длинному элементу, то есть 7,0

[РЕДАКТИРОВАТЬ 2] Единственная проблема заключается в том, что текстовое поле выпадающего также корректируется. Это может скинуть ваш пользовательский интерфейс. Так что это может быть не то решение, которое вы ищете.

[РЕДАКТИРОВАТЬ 3] Это определенно другой способ визуализации. Я думаю, что единственный способ преодолеть это - создать собственный контроль, подобный тому, что было предложено здесь

Answer 9

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