下拉列表第

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> 

我不認爲你想要做的事情可能沒有很多工作或使用框架。以上是你考慮嘗試/搞亂......