样式dijit.form.Select下拉菜单 [英] Style dijit.form.Select drop down menu

问题描述

如果使用HTML标记，我可以如何调整 dijit.form.Select 下拉菜单菜单。

How can I style a dijit.form.Select drop down menu if a use the HTML markup.

<select id="sourceselect"   dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();">
</select>

要明确表示想要填充内容的下拉菜单。我想要更改该菜单的高度，如果超出了高度，则会有一个滚动条。

To make it clear it want to style the drop down menu that is filled with the content. I want to change the height of that menu and have a scroll bar if the height is exceeded.

我正在使用Dojo 1.6版。这是一个小提琴示例： http://jsfiddle.net/NH7dd/ 。

I am using Dojo version 1.6. Here is a Fiddle example: http://jsfiddle.net/NH7dd/.

编辑：为什么是minuses？

推荐答案

由Dojo生成的DOM放在DOM节点的根目录下。这是一个常见的错误，菜单在某种程度上相对于文本字段，但不是。

The menu that is generated by Dojo is placed in the root of the DOM node. It's a common mistake that the menu is somehow relative positioned towards the textfield, but it isn't.

如果您想更改菜单的样式，那么您可以使用以下CSS选择器：

If you wish to change the style of the menu, then you could use the following CSS selector:

div[dijitpopupparent="sourceselect"] > .dijitMenu {
    /** Your CSS */
}

原因这是因为菜单被包裹在一个 dijit /弹出窗口中。此弹出窗口允许显示/隐藏菜单，您可以看到它具有一个属性 dijitpopupparent ，该属性具有该字段的原始ID。

The reason this works is because the menu is wrapped inside a dijit/popup. This popup allows displaying/hiding the menu and as you can see it has an attribute dijitpopupparent which has the original ID of the field.

我还更新了你的JSFiddle，现在看起来像这个。但是，我并不建议像这样改变菜单的行为，因为您可能会弄乱组合框的原始功能/行为。我的意思是，现在我有问题去某些值，因为一个滚动刻度已经传递一个值。随着更新的样式，我甚至不能正确地选择2。

I also updated your JSFiddle, which now looks like this. But I don't really recommend changing the behavior of the menu like this, since you might mess up the original functionality/behavior of the combobox. I mean, right now I have problems going to certain values because one "scroll tick" already passes a value. With the updated style I can't even properly select "2" anymore.

编辑：在更新的JSFiddle中，滚动条将始终是可见的，如果您希望滚动条仅在出现更多选项时出现，则将 overflow-y：scroll 更改为 overflow-y：auto 。

In the updated JSFiddle the scrollbar will always be visible, if you want the scrollbar only to appear when there are more options, then change overflow-y: scroll to overflow-y: auto.

这篇关于样式dijit.form.Select下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！