Dojo FilteringSelect 如何有水平滚动答案

【问题标题】：How Dojo FilteringSelect can have Horizontal ScrollDojo FilteringSelect 如何有水平滚动
【发布时间】：2012-02-14 13:44:17
【问题描述】：

我有一个选择字段，其中我的选项值超过大约 250 个字符，这就是用户无法读取选择框中的值的原因。

有没有办法让选择成为水平滚动或者我可以换行。

【问题讨论】：

250 个字符的选项文本...真的吗？
我什至不想回答这个问题...如果您的选择框有超过 250 个字符，您应该重新考虑要在该选择框中放入什么，而不是如何包装等等。 .
但现在是认真的。您可以将<select> 设置为任意宽度，窗口将获得一个水平滚动条，允许用户阅读所有内容。问题是什么？（除了每个人都注意到的，一个 250 个字符的选项文本。和一个水平滚动条。）
它具有动态值，我无法控制下拉菜单中的文本。

标签： javascript html css dojo

【解决方案1】：

您可以使用样式属性指定框的宽度。唯一的问题是，你看不到整个单词。它切断了它。

<select size="1" name="blah" style="width:250px">

我对您的建议是尝试限制选择字段中的字符数。 250 个字符相当长。您也可以考虑使用不同的输入控件。

【讨论】：

【解决方案2】：

正如其他评论者所指出的，您应该为了您的用户重新考虑您的 UI。

但是，如果这超出了您的控制范围，CSS white-space 属性可能会有所帮助。

【讨论】：

【解决方案3】：

我同意评论者的观点，即您可能应该重新考虑 UI。就是说，如果您坚持使用那么长的选项，您可以尝试chosen javascript plugin。它基本上劫持了一个有针对性的选择元素，并用一组时髦的 div 代替它，这些 div 就像一个选择元素。但是，您可以随意设置 div 的样式。

【讨论】：

【解决方案4】：

这是我的过滤器选择和一个跨度节点，它将充当下拉列表的虚拟窗格。

<span dojoAttachPoint="dumyPane" style="z-index: 1; position: absolute; float: none; margin-left: 20px; margin-top: 10px;">
<input type="text" dojoType="dijit.form.FilteringSelect" dojoAttachPoint="myDrop" size="50" style="width:400px;">

以下是将我的下拉节点附加到虚拟窗格的代码 sn-p。

dojo.connect(myDrop, "openDropDown", this, function(val){
  dojo.connect(myDrop.dropDown, "onClick", this, function(){

 if(typeof  myDrop.dropDown != "undefined" &&  myDrop.dropDown !=null){         
    myDrop.setDisplayedValue(event.srcElement.innerText);                                               
    }

   });
     if(typeof  myDrop.dropDown != "undefined" &&  myDrop.dropDown !=null){ 
        var ddNode = myDrop.dropDown.domNode;                           
    dojo.style(ddNode,{overflowX: "scroll",overflowY: "scroll",width: "400px",height: "100px"});

   dumyPane.appendChild(ddNode);
    }

});

【讨论】：