Проблема с Выпадающим списком

Question

У меня возникла проблема, из-за которой выпадающий список в IE 6/7 ведет себя как таковой:

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

Однако в Firefox проблемы нет, так как он соответствующим образом увеличивает ширину.Именно такого поведения мы хотим в IE 6/7:

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

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

Answer 1

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

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

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

Удачи.

Answer 2

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

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

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

Answer 3

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

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

Answer 5

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

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

Answer 6

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

[EDIT] Да, протестировано в веб-приложении vs2005. Добавил элемент управления и поместил элементы. Он приспособился к самому длинному элементу, то есть 7.0. Когда я установил ширину, он больше не делал этого.

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

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

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

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

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

Как вы заполняете 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 7

Answer 8

Answer 9

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

Answer 10

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

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

Как вы заполняете 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 11

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

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

Answer 12

Как вы заполняете 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 13

Answer 14