下拉列表第

Question

我在那里一个下拉列表，在IE 6/7是表现为这样一个问题：

你可以看到下拉宽度不够宽，以显示整个文本而不展开整个下拉列表。

但是，在Firefox中，没有问题，因为它相应地扩展了宽度。这是我们要在IE 6/7的行为：

我们已经看了各种方式利用的onfocus，的onblur，onchange事件，键盘和鼠标事件，试图解决这个问题，但仍有一些的问题。

我想知道是否有人在IE 6/7中解决了这个问题，而没有使用任何工具包/框架（YUI，Ext-JS，jQuery等）。

Answer 1

This guy和你有同样的问题，他提出了一个解决方案。这有点破绽，取决于你如何进行UI设置，但这是一个选项。我希望它有帮助。

编辑

的链接，我开始寻找竟是this one，这是同一个，添建议。我认为这是比我原来的发现更好的解决方案。 2nd编辑这个解决方案实际上依赖于YUI框架，但我不会想象复制它背后的主要想法太难。否则，第一个链接也可以，并且简单得多。

祝你好运。

Answer 2

我会建议让选择更宽。 Firefox对此很友好，并扩展了选项的宽度，以便您可以看到它的价值，但这并不能解决问题，即一旦选择了某个选项，就无法准确查看您选择的内容一个用户，除非你选择更宽。因此，从用户友好的角度来看，我建议只允许浏览器根据其内容调整选择的大小，或者设置一个足够宽的宽度以获取最宽选项内容的值。

Answer 3

我认为，如果您将控件的宽度留空，它将调整为控件中的数据大小。

[编辑]是的，在vs2005网络应用程序中进行了测试。添加控件并放入项目。它调整到最长的项目，即7.0当我规定宽度时，它不再这样做。

[编辑2]唯一的问题是，下拉菜单的文本框也会调整。这可能会甩掉你的用户界面。所以这可能不是您正在寻找的解决方案。

[编辑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文本框，你需要选择其中一个（定义或不定义宽度）。这是所有已知浏览器编码困难的典型例子，除非公司聚集在一起并说“这将是未来的方式”。

作为替代方案，您可以使用另一个回复中提到的自制解决方案。在你的情况下，我会推荐它。

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> 

我不认为你想要做的事情可能没有很多工作或使用框架。以上是你考虑尝试/搞乱......