下拉列表问题

Question

我遇到一个问题，即IE 6/7中的下拉列表的行为如下：

您可以看到下拉列表width不够宽，无法显示整个文本，而没有扩展整个下拉列表。

但是在Firefox中，没有问题，因为它相应地expands the width。这是我们在IE 6/7中想要的行为：

我们研究了各种方法来利用onfocus, onblur, onchange, keyboard and mouse events来解决问题，但仍然有一些问题。

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

我遇到一个问题，即IE 6/7中的下拉列表的行为如下：您可以看到下拉宽度不够宽，无法显示整个文本，而不扩展整个下拉列表...] >

This guy与您有相同的问题，他想出了一个解决方案。这有点hack，取决于您如何设置UI，但这是一个选择。希望对您有所帮助。

edit

我开始寻找的链接实际上是this one，与Tim所建议的相同。我认为这是比我最初的发现更好的解决方案。 第二编辑

此解决方案实际上依赖于YUI框架，但是我不认为要复制其背后的主要思想太难了。否则，第一个链接也可以，并且更简单。

祝你好运。>>

这种情况在您的情况下可行吗？

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

下拉菜单的宽度在鼠标悬停时增大/缩小。

<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>
我认为，如果不进行大量工作或使用框架，您想做的事情是不可能的。以上是您可以考虑尝试/与...聊天的内容。

我建议将选择范围扩大。 Firefox对此很友好，并扩展了选项的宽度，以便您可以看到其值，但这并不能解决以下问题：选择了选项后，您将无法完全看到所选内容用户，除非您扩大选择范围。因此，从用户友好的角度来看，我建议您仅允许浏览器根据其内容调整选择的大小，或者将宽度设置为最宽选项内容的值。

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

我们有一个固定的宽度下拉列表，我们希望它像上面显示的那样在FireFox 7中起作用。

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

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

[编辑2]唯一的问题是下拉菜单的文本框也会调整。这可能会使您的UI退出。因此，这可能不是您要寻找的解决方案。

[编辑3]绝对是它们呈现的方式不同。我认为您可以克服此问题的唯一方法是创建自己的控件，类似于建议的here

我在IE7上对此进行了测试，并相应地进行了扩展。您确定不使用某种怪异的CSS来迫使它仅在IE 6/7中具有该大小吗？ （可以使用“ * html”之类的怪异CSS选择器来定位特定的浏览器）

基本上，如果确实需要ACTUAL文本框，则需要选择一个或另一个（定义或不定义宽度）。这是一个经典示例，说明了在为所有使用的已知浏览器进行编码时遇到的困难，并且直到公司聚集在一起并说“这将是永远的方式。

作为替代，您可以使用另一个答复中提到的本地解决方案。对于您的情况，我会推荐。

您如何填充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 1

This guy与您有相同的问题，他想出了一个解决方案。这有点hack，取决于您如何设置UI，但这是一个选择。希望对您有所帮助。

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对此很友好，并扩展了选项的宽度，以便您可以看到其值，但这并不能解决以下问题：选择了选项后，您将无法完全看到所选内容用户，除非您扩大选择范围。因此，从用户友好的角度来看，我建议您仅允许浏览器根据其内容调整选择的大小，或者将宽度设置为最宽选项内容的值。

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

我们有一个固定的宽度下拉列表，我们希望它像上面显示的那样在FireFox 7中起作用。

Answer 5

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

Answer 6

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

Answer 7

我在IE7上对此进行了测试，并相应地进行了扩展。您确定不使用某种怪异的CSS来迫使它仅在IE 6/7中具有该大小吗？ （可以使用“ * html”之类的怪异CSS选择器来定位特定的浏览器）

基本上，如果确实需要ACTUAL文本框，则需要选择一个或另一个（定义或不定义宽度）。这是一个经典示例，说明了在为所有使用的已知浏览器进行编码时遇到的困难，并且直到公司聚集在一起并说“这将是永远的方式。

作为替代，您可以使用另一个答复中提到的本地解决方案。对于您的情况，我会推荐。

您如何填充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

基本上，如果确实需要ACTUAL文本框，则需要选择一个或另一个（定义或不定义宽度）。这是一个经典示例，说明了在为所有使用的已知浏览器进行编码时遇到的困难，并且直到公司聚集在一起并说“这将是永远的方式。

作为替代，您可以使用另一个答复中提到的本地解决方案。对于您的情况，我会推荐。

Answer 9

您如何填充DropDownList。我正在使用以下代码填充DropDownList，它根据显示的最大文本调整宽度：