Question

我遇到的问题是IE 6/7中的下拉列表表现如下：

alt text

您可以看到下拉宽度不够宽，无法展开整个文本而不会展开整个下拉列表。

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

alt text

我们已经研究了各种方法来利用onfocus，onblur，onchange，键盘和鼠标事件来尝试解决问题，但仍然存在一些问题。

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

Answer 1

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

修改

我开始寻找的链接实际上是this one，这与Tim建议的相同。我认为这是一个比我原来找到的更好的解决方案。 第二次编辑这个解决方案实际上依赖于YUI框架，但我不会想象复制它背后的主要思想太难了。否则，第一个链接也没问题，而且更简单。
祝你好运。

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

我认为如果你在控件上留下宽度为空白，它会调整为控件中的数据。

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

[编辑2]唯一的问题是下拉列表的文本框也会调整。这可能会使您的UI失效。所以这可能不是您正在寻找的解决方案。

[编辑3]这绝对是他们渲染的不同方式。我认为你能克服这个问题的唯一方法是创建一个类似于建议here

的控件

Answer 6

问题是，我们不希望它自动调整大小，让我们将问题隔离到这个特定问题。虽然我同意从可用性的角度来看它并不理想，但我仍然想解决这个问题。

我们有一个固定的宽度下拉列表，我们希望它的行为与上面显示的FireFox 7一样。

Answer 7

我在IE7上对此进行了测试，并相应扩展。你确定你没有使用某种奇怪的CSS，只能在IE 6/7中强制它这么大吗？（可以使用奇怪的CSS选择器黑客（例如'* html'）

来定位特定的浏览器

Answer 8

基本上，如果你确实需要一个ACTUAL文本框，你需要选择一个或另一个（定义或不定义宽度）。这是编码所有已知浏览器所遇到的困难的一个典型例子，在公司走到一起并说“这就是它将要发生的方式。”永远不会出现这种情况。

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

Answer 9

如何填充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的宽度。

下拉列表问题

9 个答案: