падения Список вниз Выпуск

Question

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

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

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

Мы рассмотрели различные способы использовать OnFocus, ONBLUR, OnChange, события клавиатуры и мыши, чтобы попытаться решить эту проблему, но все еще некоторые вопросы.

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

Answer 1

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

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

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

Удачи.

Answer 2

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

Answer 3

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

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

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

[EDIT 3] Это, безусловно, другой способ визуализации. Я думаю, что единственный способ преодолеть это - создать собственный контроль, аналогичный тому, что было предложено here

Answer 4

Как вы заселяете 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 5

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

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

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

Answer 6

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

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

Answer 7

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

Answer 8

В принципе, если вам действительно нужен текстовый текст ACTUAL, вам нужно будет выбрать тот или иной (определить или не определить ширина). Это классический пример трудностей с кодированием для всех известных браузеров, и на самом деле нет никакого способа обойти это, пока компании не соберутся вместе и не скажут: «Так оно и будет. FOREVER».

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

Answer 9

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

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